Angular Renderer2 移除监听器答案

【问题标题】：Angular Renderer2 remove listenerAngular Renderer2 移除监听器
【发布时间】：2017-11-11 06:14:03
【问题描述】：

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

界面如下：

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

在渲染器 v1 中，listen 和 listenGlobal 返回一个 Function，但是这个返回 void。

这是一个问题吗？如果没有，我该如何移除监听器？

【问题讨论】：

but this one returns void.这个返回函数返回void。
是的。看界面的时候好像睡着了
我刚刚犯了同样的错误 :-) 我想当你工作到很晚时，紧凑的 typescript 语法有时很容易被忽略..

标签： angular angular2-render

【解决方案1】：

和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();
    }
  }
}

【讨论】：

【解决方案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);
    });

而且不用担心销毁，关闭 observable 时会由 rxjs 处理！

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

查看另一个答案，了解更多详情：Is it possible to use HostListener in a Service? Or how to use DOM events in an Angular service?

【讨论】：

【解决方案3】：

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

listener: any;

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

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

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

【讨论】：