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キーを押しても同じイベントが発火するような実装です。
ここまでお読みいただきありがとうございました!
参考
この記事が気に入ったらサポートをしてみませんか?