私はangular2を初めて使っていますので、私の問題の記述に間違った言葉を使用しても構いません。angle2コンポーネントから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>
そして機能がcallesを取得していますが、変数が定義されていない:
onItemSelected(selectedItemId: string){
console.log("onItemSelected(" + selectedItemId + ")");
}
コンソール出力は、次のとおり
ログ:onItemSelected(未定義)
私は何が欠けていますか? イベントが送信され、関数が呼び出されましたが、パラメータが失われました。
多分、選択したIDへのバインディングのいくつかの他の形式がより良いでしょう。親コンポーネントがビューコンポーネントの新しい選択に反応できる限り、私はあらゆる種類のソリューションにオープンしています。
が<my-selector-component (selectEvent)="onItemSelected($event)">
</my-selector-component>
あなたがEventEmitter
のemit
メソッドのパラメータとして提供した値がそれに対応:
ありがとうございます、これはすぐに機能しました!私は単にドキュメントでそれを見るために盲目だったのですか、これは本当に隠されていますか? –
あなたは大歓迎です!カスタムコンポーネントがトリガーできるイベントについてはっきりしています...いいえ心配;-) –
リスナーに複数のパラメータを設定することは可能ですか?例えば、 'onItemSelected($ event、more、more)'などです。私は '$ event'を配列として作ることができますが、好奇心が強いだけです。 – allenhwkim