質問

Angular 2をいじり始めたところですが、イベントリスナーを要素に動的に追加したり削除したりする最良の方法をどなたか教えていただけないでしょうか。

私はコンポーネントをセットアップしています。テンプレート内のある要素がクリックされたときに mousemove を同じテンプレート内の別の要素に追加します。そして、3番目の要素がクリックされたときに、このリスナーを削除したい。

Javascript を使って要素を取得し、標準の addEventListener() が、もっと " アンギュラー2.0 "これを行う方法は、私が調べるべきものです。

どのように解決するのですか？

Angular 4.0.0-rc.1 でレンダラーが非推奨になりました。

は angular2 way を使用することです。 listen または listenGlobal から レンダラ

例えば、Componentにクリックイベントを追加したい場合、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 にアクセスできるようになります。 document , body など。

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

beta.2以降では listen と listenGlobal は、リスナーを削除するための関数を返します ( 変更点 のセクションをご覧ください)。これは、大きなアプリケーションでのメモリリークを回避するためです ( #6686 ).

そこで、動的に追加したリスナーを削除するために listen または 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();
}

ここでは プルンクル を、動作例とともに紹介します。この例では listen と listenGlobal .

RendererV2 を Angular 4.0.0-rc.1+ と共に使用する。 ^{<サブ (Renderer2は4.0.0-rc.3以降)}

• 25/02/2017 : Renderer は非推奨となり、現在は RendererV2 (下の行を参照)。を参照してください。 コミット .

• 10/03/2017 : RendererV2 にリネームされました。 Renderer2 . を参照してください。 変更点 .

RendererV2 はもうない listenGlobal グローバルイベント(document, body, window)用の関数です。それは listen という2つの機能を実現する関数があります。

参考までに、「Select」ボタンをコピー＆ペーストしています。 ソースコード DOM Rendererの実装が変更される可能性があるからです（そう、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();

プルンクル と Angular 4.0.0-rc.1 を使って レンダラV2

Plnkr と Angular 4.0.0-rc.3 を使って レンダラ2