2つのパラメーターをAngularのEventEmitterに渡すにはどうすればよいですか?


98

コンポーネントEventEmitterにがありますが、エラーがスローされるため、コンパイルできません。

提供されたパラメータがコールターゲットのシグネチャと一致しません

私のコンポーネント:

@Output() addModel = new EventEmitter<any>();

saveModel($event, make, name) {
  this.addModel.emit(make, name);
}

その中のパラメータの1つを削除this.addModel.emit()するEventEmitterと機能しますが、2つのパラメータをに渡すことは可能ですか?

回答:


190

EventEmitterのemitメソッド@ angular.ioを見ると、タイプのパラメーターを1つだけ取ることができます。T

放出(値?:T)

許可されるパラメーターは1つだけなので、objectinemitメソッドとして渡すことを検討してください。

以下のスニペットでは、makename変数はそれぞれの値を保持しています。

this.addModel.emit({make: make, name: name});
//shorthand is below
this.addModel.emit({make, name});

2
ああ、わかりました、ありがとう!this.addModel.emit({make:make、name:name});
LorenzoBerti 2016

4
@echonaxはそれを行う必要はありません、es6がそれを処理しますここチェックしてください
Pankaj Parkar 2016

親コンポーネントでこの値を監視/取得するにはどうすればよいですか?
roshini 2017年

@roshiniは、コンポーネントの相互作用がどのように発生するかを見てください。基本的には、を使用して子コンポーネントから親コンポーネントにデータを出力する必要があります。EventEmitterオブジェクトを...
パンカジパーカー

あなたの応答のためのおかげで、私は..コンポーネントに指示からデータを渡すなどのコンポーネントが、必要性の相互作用の間に、このエミッタを知っている
ロシーニ

44

強く入力する別のオプションは次のとおりです。

@Output addModel = new EventEmitter<{make: string, name: string}>();

その後、@ Pankajのように放出できます-Parkarショー

this.addModel.emit({make, name});
または
this.addModel.emit({make: 'honda', name: 'civic'});

objectまたはを使用する代わりに強い型付けができるようになりましたany


23

作って直しました

EventEmitter<object>();

次に、次のようなオブジェクトを渡すことができました。

this.MyOutputVariable.emit({ name: 'jack', age: '12' });

そしてそれはうまくいった。


1
これは素晴らしい、アダム。あなたの答えに反することは何もありませんが、標準的な方法(そして良い方法)は常に1つ以上の値と一緒にイベントオブジェクトを提供することですpublish(event, value)subscribe(e, value) {...}。Angularがインターフェースを定義し、これを彼らのやり方で実装したことに少し驚いています。
コーディ

2
以下のような強力なタイプのソリューションの賛成でDownvotednew EventEmitter<{name: string, age: number}>();
Liero

5

これは私にとって古い質問だと思います。インターフェイスを作成し、コードをより整理できるオブジェクトとして送信します。

 export interface addModelArgs{
      make:string,
      name:string
    }
@Output() addModel = new EventEmitter<addModelArgs>();

次のように呼びます

    this.addModel.emit({make: 'honda', name: 'civic'});
or 
    let savParamters:addModelArgs={make: 'honda', name: 'civic'};

    this.addModel.emit(savParamters);
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.