Angular_EventEmitterでカスタムイベントを作成する　#321日目

EventEmitterでカスタムイベントを作成することが可能です。
カスタムイベントを定義すると色々とできそうですが、使い方には少しクセがあります。

EventEmitterを使う際、イベントを定義するコンポーネントを分離して作成することができます。例えばappでカスタムイベントを使いたいとして、buttomコンポーネントでそれを定義する場合、テンプレートとコントローラーは以下のような構造になります。

　カスタムイベントを処理するコントローラー(app.component.ts)
　　　　↑
★カスタムイベントが必要なテンプレート(app.component.html)
　　　　↓
　カスタムイベントを設置するテンプレート(buttom.component.html)
　　　　↓
　カスタムイベントを定義するコントローラー(buttom.component.ts)

サンプルコードはこちらのブログから、理解に必要な箇所のみ抜粋しておきます。

完成する画面は以下のイメージです。

まずカスタムイベントを処理するコントローラーです。カスタムイベントの発火を検知して、その内容に応じて処理を加えていきます。ここではただ単に数字を1ずつ加算するのと、発火したeventをtextという変数に代入しているだけです。

[app.component.ts]
import { Component, EventEmitter } from '@angular/core';

export class AppComponent {
  counter = 0;
  text = '';

  myCount(event:any){
    this.text = event;
    this.counter++;
  }
}

続いてカスタムイベントが必要なテンプレートです。カスタムイベントを設置したいページのことです。

[app.component.html]
 
<p>クリック数：{{counter}}</p>
<p>{{text}}</p>
<app-button (buttonClick)="myCount($event)"></app-button>

カスタムイベントを実際に設置するテンプレートです。上記の<app-button>に該当しています。

[button.component.html]

<button (click)="eventClick($event)">send</button>

カスタムイベントを定義するコントローラーです。ここではボタンのクリックを検知しているだけです。

[button.component.ts]

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

@Component({
  selector: 'app-button',
 })

export class ButtonComponent implements OnInit {

  @Output()
  buttonClick = new EventEmitter();

  eventClick(event:any){
    this.buttonClick.emit(event);
  }
}

私が今携わっているWebツールでは、EventEmitterは検索機能の実装で使われていました。ある検索ワードを入力した時に、検索ボタンを押してもEnterキーを押しても同じイベントが発火するような実装です。

ここまでお読みいただきありがとうございました！

参考

[Angular] EventEmitterの使い方