Angular講座:コンポーネント間の値受け渡し②

おさらい

・Input　https://qox.jp/blog/angular-course01/
・Output　今回
・service https://qox.jp/blog/angular-course03/
・RxJS https://qox.jp/blog/angular-course04/
・Storage
・Routing

忙しすぎて続けるはずがポッカリ開いてしまいました。

前回はコンポーネントとは何か、コンポーネントが親子関係にあるとき、Inputを利用した親から子への値の渡し方についてサンプルを紹介しました。

今回は子から親へ値を渡すサンプルを紹介していきます。

Output

どういうときに使うのか

前回同様、コンポーネントが親子関係にあるとき、今度は子から親へ値を渡したいときにOutputを利用します

灰色のブロックが親コンポーネント、緑のブロックが子コンポーネントになっています。

それでは、緑の子コンポーネントで入力した文字列を、ボタンを押したときに、灰色の親コンポーネントで表示するサンプルを作っていきたいと思います。

※cssについてはBootstrapを利用していますので、割愛します

サンプル

まずはコンポーネントを作ります

$ ng g c parent

$ ng g c child

親コンポーネント（html）

<div class="p-3 bg-light">
  {{ message }}
  <app-output-child (childEvent)="receiveMessage($event)"></app-output-child>
</div>

親コンポーネント(ts)

export class ParentComponent implements OnInit {
  message:string;

  constructor() { }
  ngOnInit(): void {}

  receiveMessage(event:string){
    this.message = event;
  }

}

子コンポーネント（html）

<div class="bg-info p-3 m-3">
  <input type="text" [(ngModel)]="text" />
  <button type="submit" class="btn btn-primary m-2" (click)="submit()">
    メッセージを送る
  </button>
</div>

子コンポーネント(ts)

export class ChildComponent implements OnInit {
  text = "";
  @Output() childEvent = new EventEmitter<string>();
  constructor() {}

  ngOnInit(): void {}

  submit() {
    this.childEvent.emit(this.text);
  }
}

子コンポーネントでOutputに指定したフィールド名（childEvent）が、親コンポーネントで使うイベント名にあたります。

EventEmitter<T>のTの部分に、子要素から親要素へ送る値の型を指定します。
今回は文字列を送るので、stringです。

子コンポーネントで、childEvent.emit()を実行したときに、子コンポーネントからイベントを発火します。
そして、親コンポーネントでchildEventと紐づけられている、親コンポーネントtsファイル側のreceiveMessageが動きます。

サンプルのコードは以上になります。
ぜひng serveして動作を確認してみてください。

メッセージを送るのボタンを押したとき、メッセージが親コンポーネントで表示されるかと思います。