Question

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

这是界面：

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

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

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

Answer 1

与t=# with v(i,e) as ( values ('Friday',2),('Friday',3),('Saturday',4),('Saturday',5),('Saturday',6),('Friday',4),('Friday',5),('Friday',0),('Friday',1) ) select i,e,concat(e,'-',lead(e) over (partition by i order by e)) from v; i | e | concat ----------+---+-------- Friday | 0 | 0-1 Friday | 1 | 1-2 Friday | 2 | 2-3 Friday | 3 | 3-4 Friday | 4 | 4-5 Friday | 5 | 5- Saturday | 4 | 4-5 Saturday | 5 | 5-6 Saturday | 6 | 6- (9 rows)：

没有区别

Renderer

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

查看其他答案，以了解更多详细信息：Is it possible to use HostListener in a Service? Or how to use DOM events in an Angular service?

Answer 3

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

listener: any;

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

并且在发生cancel事件时，请使用空参数调用变量

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

Angular Renderer2删除侦听器

3 个答案: