我可以使用angular2组件中的EventEmitter传递变量吗？

我是angular2的新手，所以如果在描述我的问题时使用了错误的术语，请原谅。我可以使用angular2组件中的EventEmitter传递变量吗？

我有一个简单的组件让用户选择一个选项。现在我想分配这个选项给父组件。我这样做：

// import the necessary angular2 resources: 
import {Component, Output, EventEmitter} from 'angular2/core'; 
... 
// create the emitter in my component class: 
export class MyClassThatLetsUserSelectSomeContentId{ 
    @Output() selectEvent: EventEmitter<any> = new EventEmitter(); 
    public selectedId: string; 
    // this does get called, showing the correct id in the console 
    onSelect(selectedItem: MyCustomItem){ 
     this.selectedId = selectedItem.id; 
     console.log("selectedId:" + this.selectedId); 
     this.selectEvent.emit(this.selectedId); 
    } 
}

，并在主要成分包括我它在模板中是这样的：

<my-selector-component (selectEvent)="onItemSelected(selectedItemId)"></my-selector-component>

而且功能确实得到卡列斯，但变量未定义：

onItemSelected(selectedItemId: string){ 
    console.log("onItemSelected(" + selectedItemId + ")"); 
}

控制台输出是：

log：onItemSelected（undefined）

那么我错过了什么？ 事件被发送，函数被调用，但参数丢失。

也许一些其他形式的绑定到选定的ID会更好。只要父组件可以对来自视图组件的新选择作出反应，我就可以接受任何类型的解决方案。

来源

2016-02-05 Björn Kechel

您需要使用$event变量，让你触发事件时发送的值：

<my-selector-component (selectEvent)="onItemSelected($event)"> 
</my-selector-component>

您提供作为EventEmitter的emit方法的参数的值对应于它。

来源

2016-02-05 10:23:04

谢谢，这个工作马上！我是否太盲目，无法在文档中看到它，或者这真的是隐藏的？ –

不客气！事件现在非常清楚，自定义组件可以触发...无后顾之忧;-) –

是否可能有多个参数给侦听器？例如'onItemSelected（$ event，more，more）'。我可以将'$ event'作为一个数组，但只是好奇。 – allenhwkim

我可以使用angular2组件中的EventEmitter传递变量吗？

回答

相关问题