如何使父组件侦听两个子组件的更改？

Question

我有这样的结构：

<parent-component>
   <child-component [input]="name"> </child-component>
   <child-component [input]="name> </child-component>
</parent-component>

我正在使用@ViewChild来收听子组件。问题在于它仅侦听第一个孩子。

我进行了一次突袭来重现这种情况：

StackBlitz

在那里您可以看到只有第一个“ newName”显示在控制台上，而不是两个都显示。有人可以告诉我我在做什么错吗？

Answer 1

您可以使用@ViewChild代替@ViewChildren，这样您将获得两个组件数据 在这里，我附上myFormValues的日志 here is the @ViewChildren doc link

Answer 2

要同时收听这两个内容，可以使用两个ViewChilds。在.html文件中为它们分配引用，并指定哪个监听器在哪个监听器上监听。

在您的app.component.html中，它应该类似于：            

然后您可以像这样在app.component.ts中设置侦听器：

  @ViewChild('viewChild1') myFormValues;
  @ViewChild('viewChild2') anotherFormValues;
  informationInParentChild1;
  informationInParentChild2;

   constructor(private cdRef: ChangeDetectorRef) {}

  ngAfterViewInit() {
    this.informationInParentChild1 = this.myFormValues.myForm;
    this.informationInParentChild2 = this.anotherFormValues.myForm;
    this.cdRef.detectChanges();
  }

  submitForm() {
    console.log(this.informationInParentChild1.value);
    console.log(this.informationInParentChild2.value);
  }

我修改了您的stackblitz示例，其工作示例there。

致谢。

Answer 3

我无法发表评论，但同意威尔·泰勒（Will Taylor）的看法。请查看here，以获取示例中的双向绑定示例。不需要依赖于ChildComponent。

Answer 4

确实，对于在StackBlitz中显示的情况，您应该只使用@Output在子组件中发出一个事件，然后在父组件中处理该事件。

使用此方法会比ViewChild / ViewChildren在您的组件之间建立更松散的耦合，因为后者会导致父级需要更多地了解子级的实现。

如果遇到需要父组件在子组件上调用方法的情况，则使用@ViewChildren是正确的解决方案，如Yash Rami的答案所述。