Angular2でのWindowイベントの設定方法を紹介します。
ディレクティブで設定する
例えば、resizeイベントの際に処理を実行したい場合は次のようにします。
<div (window:resize)="onResize()">Box</div>
ここでは、ディレクティブが含まれるコンポーネントの onResize メソッドが呼ばれます。
HostListenerで設定する
Angular2には、HostListener というデコレータがあります。
import { Component, HostListener } from '@angular/core';
@HostListener を宣言した後のメソッドをバインドすることができます。
export class Demo {
...
// resizeイベントを宣言
@HostListener('window:resize')
onResize() {
// resize時の処理
}
// clickイベントを宣言
@HostListener('click', ['$event.target'])
onClick(btn) {
// click時の処理
}
}
第2引数にはメソッドに渡すイベントオブジェクトを指定することが出来ます。
お試しあれ〜。
