Angular2：我可以用箭头函数而不是方法处理@Output return值吗

Question

我有一个 Angular2 应用程序，它有一个父组件 (AppComponent) 和几个子组件。其中之一 (DnDContainer) 有一个 @Output 变量，如下所示：

@Output() onDataUpdate: EventEmitter<any> = new EventEmitter();

在DnDContainer中，有一个按钮，其点击事件代码如下：

onSave(e) {
   this.onDataUpdate.emit(this.data);
   // this.data is just a simple string array
}

然后，从 AppComponent 中，有几个 DnDContainer 组件（它们的选择器是 'dnd-container'）。我想听听他们的 'onDataUpdate' 输出并将其分配给不同的数组（targetItemsA、targetItemsB 等）。我正在尝试使用像这样的简单语法：

<dnd-container (onDataUpdate)="($event) => {targetItemsA = $event}"></dnd-container>
<dnd-container (onDataUpdate)="($event) => {targetItemsB = $event}"></dnd-container>

但它不起作用，所以我不得不创建一个特定的方法来将一个数组分配给另一个数组，如下所示：

<dnd-container [onDataUpdate)="update('A', $event)"></dnd-container>
<dnd-container [onDataUpdate)="update('B', $event)"></dnd-container>

该方法如下所示：

update(which, data) {
  switch (which) {
   case 'A':
     this.targetItemsA=data;
     break;
   case 'B':
     this.targetItemsB=data;
     break;
   case 'C':
     this.targetItemsC=data;
     break;
   (ETC...)
  }
}

有没有更简单的方法（比如我一开始指出的带有箭头功能的方法）？对不起，如果它太基础了，我对 Angular2 还很陌生。

提前致谢，

PS: 在 tsconfig.spec.json 文件中，我已将 'target' 属性更改为 'es6' 但它仍然不起作用。

Answer 1

进行以下更改：

@Output() onDataUpdate: EventEmitter<string[]> = new EventEmitter<string[]>();

如果您知道将要发出的类型，请尽量避免使用 any。

在应用程序组件中，您有两个选择：创建一个函数来处理事件（更干净的模板），或者直接在其中进行操作。显然你不想创建一个方法，所以下面应该工作：

<dnd-container (onDataUpdate)="targetItemsA = $event"></dnd-container>

Angular2：我可以用箭头函数而不是方法处理@Output return值吗

Angular2: Can I process @Output return value with arrow function instead of method

arrow-functions

angular2-template

angular2-databinding

angular