Angular の@Output の使い方

Angular の@Output の使い方
1. 関連

Angular の@Output の使い方

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

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

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

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

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

ng generate component child

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

import { Component, EventEmitter, Output } from '@angular/core';

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

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

child.component.ts

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-child',
  template:
  `<button (click)='childClick()'>子ボタン</button>`,
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  @Output() aaa = new EventEmitter();
  childClick() {
    this.aaa.emit('aiueo'); // emitメソッドで親コンポーネントに通知する仕組み
  }
}

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

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

ng generate component parent

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

<app-child (aaa)='onParent($event)'></app-child>

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

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

parent.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template:
  `
  <div style='text-align: center'>
  <br>
  <app-child (aaa)='onParent($event)'></app-child> <!-- 子コンポーネントを使用している -->
  <br>
  <span>{{oya}}</span>
  </div>
  `,
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  oya: string;
  onParent(event) {
    this.oya = event; // 子コンポーネントのemitメソッドの第一引数を子コンポーネントのプロパティに代入する
  }
}

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