Angular 中的事件数组答案

【问题标题】：Array of Events in AngularAngular 中的事件数组
【发布时间】：2018-04-13 21:24:09
【问题描述】：

我在我的项目中使用 angular 5。我正在尝试从子组件中发出事件，例如

@Output studentUpdated:EventEmitter<any> = new EventEmitter()
updated(e){
   this.studentUpdated.emit(e);
}

并在父组件中列出，如

<student (studentUpdated)="showSuccess($event)" />

按预期工作。但是在我的学生组件中，我需要实现几个事件。例如保存、更新、删除、确认、预定...等

我在考虑不是每行编写一个事件并单独调用它们，而是有可能我们可以初始化事件数组并根据需要执行它们。例如

  @Output() events:EventEmitter<any>[] = []
  for(var keyNum in arrayOfEvents)
  {
        var key = arrayOfEvents[keyNum];
        this.events.push(new EventEmitter())
  }

然后在某个事件上，我们根据索引发出事件。

this.events[0].emit(e)

如果可以的话，我们怎么做，以及如何在父组件上监听该事件？

【问题讨论】：

您肯定不会在同一个项目中使用 angular 4、5 和 6。我从您的angular5 推断出您使用的是 5.x，因此我编辑了问题以反映这一点。这对现在和未来的读者都有帮助。如有不妥请指正。
@msanford 感谢您更新问题。我提到所有这些是因为我从 Angular 4 开始更新到 5，现在转向 6。所有这些版本都使用相同的 EventEmitter 类。我假设人们像你一样很棒并且理解有人问了什么;）
你好。只是最近的版本，尤其是6，确实有很多变化。只是帮助保持井井有条。祝你好运！

标签： angular angular5

【解决方案1】：

您可以尝试另一种方法来解决您的问题，例如，您可以重组输出事件数据，以描述您正在执行的操作类型

interface CustomEventData {
 kind : string,
value: any
}

这样你将只有 eventEmitter 输出

@Output action:EventEmitter<any> = new EventEmitter()

updated(e){
   this.action.emit({kind "updated", value : e });
}

在您的父组件中，您处理事件的函数将根据接收到的事件类型做出反应

showSuccess({ kind , value}) {
    switch(kind)
       case "updated" ...
}

【讨论】：

这是一个很好的方法，尝试只有一个 EventEmitter 并发送一个具有您想要执行的操作类型的对象（更新、删除、......等等）
另外，你有 event.type 来识别触发的事件类型
@Ricardo 感谢您的回答，它应该像您提到的那样工作。我将更改我的代码。