angular - 如何在Angular 7中同时从不同的EventEmitter获取所有发出的值

Question

我有一个父组件，而父组件有多个子组件。每个孩子可能是不同的组件。例如;

                          --- Parent ---
                                |
 Child1(component1) --- Child2(component1) --- Child3(component5) .....

我希望当我单击parent组件中的按钮时，我想同时从所有child组件中获取消息。我可以用来EventEmitter从孩子到父母的价值，但我不知道如何同时获得所有孩子的价值？

编辑：

我的子组件是这样动态创建的；

@ViewChild('component1Container', { read: ViewContainerRef }) component1ContainerRef: ViewContainerRef;
@ViewChild('component2Container', { read: ViewContainerRef }) component2ContainerRed: ViewContainerRef;

Answer 1

您可以通过父模板中的 id 访问您的组件：

@Component({selector: 'parent', template: `
  <app-child1 #child1>
  <app-child2 #child2>
  <app-child3 #child3>
  <button (click)="onButtonClick(child1.aProp, child2.anotherProp, child3.thirdProp)"></button>
`})
class ParentComponent {
  onButtonClick(aProp: string, anotherProp: number, thirdProp: string): void { ... }
}

---

或者，您可以使用@ViewChild指令直接访问父组件内的子组件，如下所示：

@Component({selector: 'parent', template: `
  <app-child1 #child1>
  <app-child2 #child2>
  <app-child3 #child3>
  <button (click)="onButtonClick()"
`})
class ParentComponent {
  @ViewChild("child1", {static: false}) child1!: Child1Component;
  @ViewChild("child2", {static: false}) child2!: Child2Component;
  @ViewChild("child3", {static: false}) child3!: Child3Component;

  onButtonClick(): void {
   console.log(this.child1.aProp, this.child2.anotherProp, this.child3.thirdProp);
  }
}