Angular の@Output の使い方

求人
Angular の@Output の使い方

@Inputの使い方は理解しやすいですが、@Outputの使い方は理解するのが少し難しい気がします。

コンポーネントとコンポーネントの連携ではなく、コンポーネントの中にコンポーネントが存在するような親コンポーネントと子コンポーネントの関係にあるような連携の場合に、子コンポーネントから親コンポーネントに連携する場合に@Outputを使用します。

関係 コンポーネント名 セレクタ
parent app-parent
child app-child

子コンポーネントを作成する

簡単な子コンポーネントを作成してみます。

まず、子コンポーネントのchild.component.tsにEventEmitterとOutputをインポートします。

子コンポーネントのプロパティはEventEmitterのインスタンスを代入します。

インスタンスのemitメソッドを実行することにより、イベントが発火します。この辺は決まり事なので、敷居が高くなるのかと思ったりします。具体的には、child.component.tsは以下のようになります。

child.component.ts

emitメソッドの引数は、親コンポーネントの$eventで取得することができます。

では親コンポーネントを作成します。

子コンポーネントのEventEmitterインスタンス(ここではaaa)を半角括弧で囲みます。

親コンポーネントのonParentメソッドの引数に$eventを指定することにより、子コンポーネントのemitメソッドの第一引数を取得することができます。

親コンポーネントを以下のように記述しました。

parent.component.ts

実行すると、子コンポーネントの値が親コンポーネントに渡され、レンダリングされているのが確認できます。

Angular の@Output の使い方

詳細は「AngularとTypeScriptでSPAを作成する」を参照ください。

EventEmitter

株式会社CONFRAGE

関西で140-170/80~120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
Python3.6,Djangoを勉強中です,Javaは少し飽きてしまってます–;
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^

スポンサーリンク
  • このエントリーをはてなブックマークに追加
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA