Angular Parent 至 Child

Question

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

Answer 1

您可以使用 @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 2

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

Answer 3

我使用 @input() 将值从父级传递给子级并使用

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

}

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

Angular Parent 至 Child

Angular Parent to Child

dom

communication

parent-child

angular