Angular Parent to Child

Question

最初，我的父组件与子组件没有任何关系。只是一个元素列表。但是当用户点击列表子组件加载时。然后我可以使用@ViewChild从父级调用子组件的方法。但这最初不起作用，因为最初没有父子关系。我该怎么解决这个问题。

Answer 1

我想你可以使用EventEmitter1。在组件中，您可以在加载时发出任何消息。在另一个组件中，您可以订阅eventemitter。

Answer 2

您可以使用非常相似的@ViewChildren，但也可以使用AfterViewInit生命周期钩子之前尚未存在的元素。另外，它将你的元素包裹在QueryList中。

QueryList确实有一个changes属性，这是一个你可以订阅的观察。实现可能看起来像这样：

export class SomeComponent implements AfterViewInit {

  @ViewChildren(ChildComponent) children: QueryList<ChildComponent>;

  ngAfterViewInit(): void {
    this.children.changes.subscribe(children => {
      children.forEach( (child: ChildComponent) => {
        child.somePublicMethod();
      });
    });
  }
}

Answer 3

我使用@input（）将值从parent传递给child并使用

ngOnChanges (changes: SimpleChanges) {
 for (let propName in changes) {
     let change = changes[propName];
     console.log(change);
 }

}

其中ngOnChanges订阅更改并存储当前值和先前值