如何在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);
  }
}