2016-02-05 7 views
6

私は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> 

あなたがEventEmitteremitメソッドのパラメータとして提供した値がそれに対応:

答えて

11

あなたがイベントをトリガするときに送る値を取得するために$event変数を使用する必要があります。

+0

ありがとうございます、これはすぐに機能しました!私は単にドキュメントでそれを見るために盲目だったのですか、これは本当に隠されていますか? –

+0

あなたは大歓迎です!カスタムコンポーネントがトリガーできるイベントについてはっきりしています...いいえ心配;-) –

+2

リスナーに複数のパラメータを設定することは可能ですか?例えば、 'onItemSelected($ event、more、more)'などです。私は '$ event'を配列として作ることができますが、好奇心が強いだけです。 – allenhwkim

関連する問題