☰

イベントリスナーを動的に追加する 質問する

tag-icon • tag-icon angular typescript addeventlistener
イベントリスナーを動的に追加する 質問する

私は Angular 2 を使い始めたばかりですが、要素にイベント リスナーを動的に追加したり削除したりする最善の方法を誰か教えていただけないでしょうか。

コンポーネントを設定しました。テンプレート内の特定の要素がクリックされたときに、mousemove同じテンプレートの別の要素にリスナーを追加したいと思います。次に、3 番目の要素がクリックされたときにこのリスナーを削除したいと思います。

私は、単純なJavascriptを使って要素を取得し、標準を呼び出すだけでこれを動作させましたaddEventListener()が、もっと「Angular2.0「私が調べるべき、これを行う方法」

ベストアンサー1

レンダラーはAngular 4.0.0-rc.1で非推奨になりました。以下の更新をお読みください。

の角度2ウェイ使用したりlisten、listenGlobalレンダラー

たとえば、コンポーネントにクリック イベントを追加する場合は、Renderer と ElementRef を使用する必要があります (これにより、ViewChild や を取得するものを使用するオプションも提供されますnativeElement)。

constructor(elementRef: ElementRef, renderer: Renderer) {

    // Listen to click events in the component
    renderer.listen(elementRef.nativeElement, 'click', (event) => {
      // Do something with 'event'
    })
);

を使用すると、、などlistenGlobalにアクセスできます。documentbody

renderer.listenGlobal('document', 'click', (event) => {
  // Do something with 'event'
});

beta.2以降ではlisten、listenGlobalリスナーを削除する関数を返すことに注意してください（重大な変更セクションを参照してください。これは、大規模なアプリケーションでのメモリリークを回避するためです（＃6686）。

したがって、動的に追加したリスナーを削除するには、返される関数を保持する変数にlistenorを割り当てて、それを実行する必要があります。listenGlobal

// listenFunc will hold the function returned by "renderer.listen"
listenFunc: Function;

// globalListenFunc will hold the function returned by "renderer.listenGlobal"
globalListenFunc: Function;

constructor(elementRef: ElementRef, renderer: Renderer) {
    
    // We cache the function "listen" returns
    this.listenFunc = renderer.listen(elementRef.nativeElement, 'click', (event) => {
        // Do something with 'event'
    });

    // We cache the function "listenGlobal" returns
    this.globalListenFunc = renderer.listenGlobal('document', 'click', (event) => {
        // Do something with 'event'
    });
}

ngOnDestroy() {
    // We execute both functions to remove the respectives listeners

    // Removes "listen" listener
    this.listenFunc();
    
    // Removs "listenGlobal" listener
    this.globalListenFunc();
}

こちらはplnkr動作例。例にはlistenとの使用法が含まれていますlistenGlobal。

Angular 4.0.0-rc.1+ で RendererV2 を使用する(Renderer2 4.0.0-rc.3 以降)

  • 2017年2月25日:Rendererは廃止されました。現在は (以下の行を参照) を使用する必要があります。 RendererV2 専念。

  • 2017年10月3日:RendererV2は に名前が変更されましたRenderer2。重大な変更。

RendererV2グローバル イベント (ドキュメント、ボディ、ウィンドウ) に対する機能はなくなりました。両方の機能を実現する関数listenGlobalのみがあります。listen

参考までに、ソースコードDOM レンダラーの実装は変更される可能性があるためです (そうです、Angular です!)。

listen(target: 'window'|'document'|'body'|any, event: string, callback: (event: any) => boolean):
      () => void {
    if (typeof target === 'string') {
      return <() => void>this.eventManager.addGlobalEventListener(
          target, event, decoratePreventDefault(callback));
    }
    return <() => void>this.eventManager.addEventListener(
               target, event, decoratePreventDefault(callback)) as() => void;
  }

ご覧のとおり、文字列（ドキュメント、本文、ウィンドウ）を渡しているかどうかを確認し、その場合は内部addGlobalEventListener関数を使用します。それ以外の場合は、要素（nativeElement）を渡すと、単純なaddEventListener

Rendererリスナーを削除するには、Angular 2.x の場合と同じです。listen関数を返してから、その関数を呼び出します。

例

// Add listeners
let global = this.renderer.listen('document', 'click', (evt) => {
  console.log('Clicking the document', evt);
})

let simple = this.renderer.listen(this.myButton.nativeElement, 'click', (evt) => {
  console.log('Clicking the button', evt);
});

// Remove listeners
global();
simple();

plnkrとAngular 4.0.0-rc.1使用してレンダラーV2

plnkrとAngular 4.0.0-rc.3使用してレンダラー2

おすすめ記事