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

邪能

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

若塔·托莱多

进行以下更改:

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

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

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章