Angular の@HostListener の使い方

Angular の@HostListener の使い方

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

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

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // イベントハンドラの上に@HostListenerを記述する
  @HostListener( 'document:click', [ '$event' ] )
  public onTest(event: Event) {
    alert('test');
  }
}

app.component.html

<p>test</p>

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

高橋

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^