web-dev-qa-db-ja.com

Angular Renderer2リスナーを削除

新しいangular 4レンダラーでリスナーを削除することは可能ですか？

ここにインターフェースがあります：

abstract listen(target: 'window' | 'document' | 'body' | any, eventName: string, callback: (event: any) => boolean | void): () => void;

レンダラーv1では、listenとlistenGlobalは関数を返しますが、これはvoidを返します。

問題ですか？そうでない場合、どのようにしてリスナーを削除できますか？

angularangular2-render
11
Serginho

Rendererとの違いはありません：

import { Renderer2 } from '@angular/core';

export class MyComponent {
  listenerFn: () => void;

  constructor(private renderer: Renderer2) {}

  ngOnInit() {
    this.listenerFn = this.renderer.listen(document, 'mousemove', () => console.log('move'));
  }

  ngOnDestroy() {
    if (this.listenerFn) {
      this.listenerFn();
    }
  }
}
35
yurzui

rxjs からfromEventPattern関数を使用することもできます。

  private createOnClickObservable(renderer: Renderer2) {
    let removeClickEventListener: () => void;
    const createClickEventListener = (
      handler: (e: Event) => boolean | void
    ) => {
      removeClickEventListener = renderer.listen("document", "click", handler);
    };

    this.onClick$ = fromEventPattern<Event>(createClickEventListener, () =>
      removeClickEventListener()
    ).pipe(takeUntil(this._destroy$));
  }

期待どおりに使用/サブスクライブする

   myMouseService.onClick$.subscribe((e: Event) => {
      console.log("CLICK", e);
    });

破壊の心配はありません。オブザーバブルを閉じるときにrxjsによって処理されます。

live-demo： https://stackblitz.com/edit/angular-so4?file=src%2Fapp%2Fmy-mouse.service.ts

詳細については、別の回答を参照してください： サービスでHostListenerを使用することは可能ですか？またはAngularサービス？ でDOMイベントを使用する方法

0
mxii