删除或销毁事件监听器 [英] Remove or destroy event listener

问题描述

在 angular2 应用程序上工作。我有 RxJS计时器实例，该实例将在用户登录时向用户推送通知。但是，它不应该推送通知如果选项卡未激活，则调度程序应暂停/停止。

working on angular2 application. I have RxJS timer instance that will push notification to user when used logged in. But it should not push notification if tab is not active then scheduler should pause/stop. It is also done.

但是主要的事情是我在ngOnInit（）中添加了 window（焦点，模糊）事件监听器。当我们更改页面/组件时，我试图在 ngOnDestroy（）上销毁它，但它也不会停止。当我们回到同一页面时，该侦听器的第二个实例也开始运行，现在我的内存/范围中将有2个调度程序实例。

But main thing is that I have added that window (focus, blur )event listener to ngOnInit(). I have tried to destroy it on ngOnDestroy() when we change page/component but though also it does not stop. When we came back to same page then second instance also started of that listener and there will be 2 scheduler instance now in my memory/scope.

所以任何人都知道如何删除/销毁 ngOnDestroy 或任何其他地方上的window.listener！

So anyone have idea that how to remove/destroy window.listener on ngOnDestroy or any other place !

代码：

timerFlag: boolean = true;
private timer;
private sub: Subscription;

ngOnInit() {
    this.sub = null;
    this.timer = null;
    console.log("home-init");
    window.addEventListener('blur', this.disableTimer.bind(this), false);
    window.addEventListener('focus', this.initializeTimer.bind(this), false);
}
disableTimer() {
    if (this.sub !== undefined && this.sub != null) {
        this.sub.unsubscribe();
        this.timer = null;
    }
}
initializeTimer() {
    if (this.timerFlag) {
        if (this.timer == null) {
            this.timer = Observable.timer(2000, 5000);
            this.sub = this.timer.subscribe(t => this.runMe());
        }
    }
}
runMe() {
    console.log("notification called : " + new Date());
}
ngOnDestroy() {
    console.log("Destroy timer");
    this.sub.unsubscribe();
    this.timer = null;
    this.sub = undefined;
    this.timerFlag = false;
    window.removeEventListener('blur', this.disableTimer.bind(this), false);
    window.removeEventListener('focus', this.initializeTimer.bind(this), false);
}

有人可以指导我如何销毁事件监听器实例，以便当我进入

can anyone guide me how to destroy event listener instance so that when I come to same page next time no second instance will start.

我尝试在 ngOnInit 中也删除了监听器，而在 window listener启动之前。

I have tried to remove listener in ngOnInit as well before start of window listener.

推荐答案

1）我猜这应该可行：

1) I guess this should work:

ngOnInit() {
  window.addEventListener('blur', this.disableTimer, false);
  window.addEventListener('focus', this.initializeTimer, false);
}

disableTimer = () => { // arrow function
  ...
}
initializeTimer = () => { // arrow function
  ... 
}

ngOnDestroy() {
  window.removeEventListener('blur', this.disableTimer, false);
  window.removeEventListener('focus', this.initializeTimer, false);
}

柱塞示例

Plunker Example

2）另一种方法是将侦听器存储在变量中因为 .bind 每次都会返回新函数

2) Another way is to store your listener in variable because .bind returns new function every time

disableTimerFn: EventListenerOrEventListenerObject;

ngOnInit() {
  this.disableTimerFn = this.disableTimer.bind(this);
  window.addEventListener('blur', this.disableTimerFn, false); 
}

ngOnDestroy() {
  window.removeEventListener('blur', this.disableTimerFn, false);
}

柱塞示例

Plunker Example

3）也许是最好的方法是使用angular2方式：

3) But maybe is the best way is to use angular2 way:

@HostListener('window:blur', ['$event'])
disableTimer (event) { ... }

销毁组件时将自动删除

柱塞示例

Plunker Example

4）另外一种angular2方式是使用渲染器

4) One more angular2 way is using Renderer

globalListenFunc: Function;
constructor(private renderer: Renderer) { }
ngOnInit() {
  this.globalListenFunc = this.renderer.listenGlobal('window', 'click', this.onClick.bind(this))
}

onClick() {
  alert('click');
}

ngOnDestroy() {
  this.globalListenFunc(); // destroy listener
}

柱塞示例

Plunker Example

另请参见

• 动态地在Angular 2中添加事件监听器

• Dynamically add event listener in Angular 2

这篇关于删除或销毁事件监听器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！