0

我有一个 Angular2 应用程序，它有一个父组件 (AppComponent) 和几个子组件。其中之一（DnDContainer）有一个像这样的@Output 变量：

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

在 DnDContainer 内部，有一个按钮，其 click 事件中包含以下代码：

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' 但它仍然不起作用。

4

1 回答 1

2

进行以下更改：

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

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

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

<dnd-container (onDataUpdate)="targetItemsA = $event"></dnd-container>
于 2017-06-20T12:00:35.743 回答