Angular2でWindowイベントを設定する

Angular2でWindowイベントを設定する

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引数にはメソッドに渡すイベントオブジェクトを指定することが出来ます。
お試しあれ〜。

五十川 洋平(Yohei Isokawa)

五十川 洋平(Yohei Isokawa)

フロントエンドエンジニア/面白法人カヤックなどのWeb制作会社に勤務したのち、故郷の新潟に戻り独立。JSフレームワークAngularやFirebase、Google Cloud Platformを使ったWebアプリ開発が得意。 また、Udemyのプログラミング解説の講師、writer-app.comの自主開発や上越TechMeetupの主催などを行っています。

プロフィール