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

Question

我是angular2的新手,所以请原谅我在描述我的问题时使用了错误的术语.

我有一个简单的组件,让用户选择一个选项.现在我想将此选项分派给父组件.我这样做:

// 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>

函数确实得到了calles,但是变量是未定义的:

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

控制台输出是:

log:onItemSelected(undefined)

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

也许对所选Id的某种其他形式的绑定会更好.只要父组件可以对视图组件中的新选择做出反应,我就可以使用任何类型的解决方案.

Answer 1

您需要使用该$event变量来获取触发事件时发送的值:

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

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