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

Question

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

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

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

编辑：

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

@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);
  }
}

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

How to get all emitted values from different EventEmitter at the same time in the Angular 7

typescript

angular

angular-event-emitter

angular7