Jump to the content

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

Angular2

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

    注目記事

    最近の記事

    ぼくが書いてます

    フロントエンドエンジニア

    イソップ

    ページの先頭に戻る

    Search results

    ×