我有一个 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] 删除。
我来说两句