Angular7

Question

在另一个组件中注入组件以访问注入组件中的函数或属性是否正确？
注意：这些组件中的 None 是另一个组件的子组件

import { UsersComponent } from './../users/users.component';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor(users:UsersComponent){
    users.getAllUsers()
  }
}

Answer 1

不，您不能将 1 个组件注入另一个组件。您应该为此创建一个服务。

您可以使用 Behaviour Subject 在 2 个不相关的组件之间进行通信。

看到这个tutorial

Answer 2

你实际上不能这样做。在 Angular 中，我们认为一切都是明智的。如果任何方法或属性被多个组件使用，您可以按照以下方法进行操作。由于您的组件不相关 child parent。你可以遵循 3 和 4 方法。

1. Parent 到 Child 和 Child 到 Parent: 通过@Input 和@Output

共享数据

这是组件间共享数据最常用的方式。它使用 @Input() 装饰器。您还可以使用 @Output() 装饰器将事件传递给 parent.

parent.component.ts:

@Component({
  selector: 'app-parent',
  template: `
    <p>{{ message }}</p>
    <app-child [input]="parentData" (output)="childMsg($event)"></app-child>`
})
export class ParentComponent{
  message: string;
  parentData = "message from parent"
  childMsg(event) {
    this.message = event;
  }
}

child.component.ts:

@Component({
  selector: 'app-child',
  template: `
    <p>{{ input }}</p>
    <button (click)="submit()">Submit</button>
  `
})
export class ChildComponent {

  @Input() input: string;
  @Output() output = new EventEmitter<string>();
  message: string = "Hello World!"
  submit() {
    this.output.emit(this.message)
  }
}

2。 Child 到 Parent: 通过视图共享数据Child

@ViewChild 装饰器允许将一个组件注入到另一个组件中，使 parent 可以访问其属性和方法。

parent.component.ts

@Component({
  selector: 'app-parent',
  template: `
    Message: {{ childData }}
    <app-child></app-child>
  `,
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements AfterViewInit {

  @ViewChild(ChildComponent) child;    

  childData: string;

  ngAfterViewInit() {
    this.childData = this.child.message
  }
}

child.component.ts:

@Component({
  selector: 'app-child',
})
export class ChildComponent {

  childData = 'Hola Mundo!';

}

N.B：我们使用 AfterViewInit 生命周期，因为 child 在视图初始化之前不可用。

3。使用服务的不相关组件： 在具有服务和行为主题的不相关组件之间共享数据

common.service.ts:

@Injectable()
export class CommonService {
  private data = new BehaviorSubject('default data');
  data$ = this.data.asObservable();

  changeData(data: string) {
    this.data.next(data)
  }
}

component-one.component.ts:

@Component({
  selector: 'app-component-one',
  template: `<p>{{data}}</p>`
})
export class ComponentOneComponent implements OnInit {

  data: string;

  constructor(private service: CommonService) { }

  ngOnInit() {
    this.service.data$.subscribe(res => this.data = res)
  }

}

component-two.component.ts:

@Component({
  selector: 'app-component-two',
  template: `
    <p>{{data}}</p>
    <button (click)="newData()">Next Data</button>`
})
export class ComponentTwoComponent implements OnInit {

  data: string;

  constructor(private service: CommonService) { }

  ngOnInit() {
    this.service.data$.subscribe(res => this.data = res)
  }
  newData() {
    this.service.data.next('Changed Data');
  }
}

4。状态管理： 使用 NgRx 在不相关的组件之间共享数据您可以使用像 NgRx 这样的商店来管理您将存储属性然后在任何地方使用的状态。 Example我学习ngrx的时候就是按照这个例子做的

Angular7 - 在另一个组件中注入组件

Angular7 - Inject Component in another Component

typescript

angular-components

angular