角度渲染器2 删除侦听器

Question

是否可以使用新的 angular 4 渲染器删除侦听器？

这是界面：

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

在渲染器 v1 中，侦听和侦听全局返回一个函数，但这个函数返回 void。

这是一个问题吗？如果没有，如何删除侦听器？

Answer 1

与Renderer没有区别：

import { Renderer2 } from '@angular/core';
export class MyComponent {
  listenerFn = () => {};
  constructor(private renderer: Renderer2) {}
  ngOnInit() {
    this.listenerFn = this.renderer.listen(document, 'mousemove', () => console.log('move'));
  }
  ngOnDestroy() {
    this.listenerFn();
  }
}

Answer 2

您也可以

使用 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 处理！

现场演示：https://stackblitz.com/edit/angular-so4?file=src%2Fapp%2Fmy-mouse.service.ts

查看另一个答案，以探索更多详细信息：是否可以在服务中使用 HostListener？或者如何在 Angular 服务中使用 DOM 事件？

Answer 3

将 Renderer.listen 处理程序的结果放在变量中更容易：

listener: any;
this.listener = this.renderer.listen('body', 'mousemove', (event) => {
  console.log(event);
});

当取消事件发生时，使用空参数调用变量

this.renderer.listen('body', 'mouseup', (event) => {
  this.listener();
});