Angular の@HostListener の使い方

Angular の@HostListener の使い方

イベントハンドラに@HostListenerをつけると、ずっとイベントをリッスンしてくれます。

以下はブラウザのどこでもよいのでクリックした時にイベントハンドラが実行されるようにリッスンしています。

app.component.ts

app.component.html

document.clickと記述することで、ブラウザのどこかをクリックするとイベントハンドラが実行されるようになります。HTML側では(click)などは一切書かなくても動作します。

イベント イベントハンドラ動作内容
@HostListener( ‘document:click’, [ ‘$event’ ] ) ブラウザのどこかをクリック時
@HostListener( ‘document:mouseover’, [ ‘$event’ ] ) ブラウザにマウスオーバー時
@HostListener( ‘window:resize’, [ ‘$event’ ] ) ブラウザのリサイズ時
スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク

コメントをどうぞ

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

CAPTCHA