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的{{1}}方法参数与之对应。

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

1 个答案: