0

親コンポーネント(AppComponent)といくつかの子コンポーネントを持つAngular2アプリケーションがあります。 、Angular2:メソッドの代わりに矢印関数で@Output戻り値を処理できますか?

onSave(e) { 
    this.onDataUpdate.emit(this.data); 
    // this.data is just a simple string array 
} 

AppComponentから、その後:そのクリックイベントに次のコードが付いたボタンがあり、

@Output() onDataUpdate: EventEmitter<any> = new EventEmitter(); 

インサイドDnDContainer:そのうちの一つ(DnDContainer)は、このような@output変数を持っていますいくつかのDnDContainerコンポーネントがあります(セレクタは 'dnd-container'です)。私は彼らの 'onDataUpdate'の出力を聞き、それを別の配列(targetItemsA、targetItemsBなど)に割り当てたいと思います。私はこのような単純な構文を使用しようとしている:

<dnd-container (onDataUpdate)="($event) => {targetItemsA = $event}"></dnd-container> 
<dnd-container (onDataUpdate)="($event) => {targetItemsB = $event}"></dnd-container> 

をしかし、それは動作しませんので、私はこのように、ちょうど別の1に配列を割り当てるための具体的な方法を作成する必要がありました:

<dnd-container [onDataUpdate)="update('A', $event)"></dnd-container> 
<dnd-container [onDataUpdate)="update('B', $event)"></dnd-container> 

方法は次のようになります(私は冒頭で指摘矢印機能付き1のように)これを行うための任意の簡単な方法があります

update(which, data) { 
    switch (which) { 
    case 'A': 
    this.targetItemsA=data; 
    break; 
    case 'B': 
    this.targetItemsB=data; 
    break; 
    case 'C': 
    this.targetItemsC=data; 
    break; 
    (ETC...) 
    } 
} 

?申し訳ありませんが、あまりにも基本的な場合、私はAngular2の新機能です。事前に

おかげで、

PS:tsconfig.spec.jsonファイルで、私は「ES6」に「ターゲット」プロパティを変更しましたが、それはまだ動作しません。

+0

'' – echonax

答えて

1

次のように変更します。あなたが放出されるタイプを知っていれば

@Output() onDataUpdate: EventEmitter<string[]> = new EventEmitter<string[]>(); 

anyを使用しないようにしてください。

アプリケーションコンポーネントには、イベントを処理する関数(クリーナーテンプレート)を作成するか、直接操作を行うという2つのオプションがあります。どうやらあなたは以下が動作するはずですので、メソッドを作成したいいけない:魅力のように働いた

<dnd-container (onDataUpdate)="targetItemsA = $event"></dnd-container> 
+0

を、どうもありがとうございました! – Fel

+0

喜んで:) :)これがあなたの質問を解決した場合、あなたの質問に遭遇したら他の人が見ることができるように、回答としてマークしてください –

関連する問題