javascript - 删除 ngOnDestroy 中的全屏事件监听器

Question

无法在 ngOnDestroy Angular 6 中删除 fullscreenchange 事件监听器

我尝试在 ngOnDestroy 中调用 .removeEventListener() ，但它不会删除事件。我还尝试过在 10 秒超时后在函数中调用removeEventListeners，之后事件仍然继续触发。

导入

import { DOCUMENT } from '@angular/common';
import { Component, HostBinding, Inject, OnInit, OnDestroy } from '@angular/core';

组件代码

elem: any;
constructor(private framesService: FramesService, private route: ActivatedRoute,
    @Inject(DOCUMENT) private document: Document) { }

 ngOnInit() {
    this.elem = this.document.documentElement;
    this.document.addEventListener('fullscreenchange', this.onFullscreenChange.bind(this));
    this.document.addEventListener('mozfullscreenchange', this.onFullscreenChange.bind(this));
 }

onFullscreenChange(event: Event) {
    event.preventDefault();
    console.log('Fullscreen event fired');
}

onViewFrame() {
    if (this.elem.requestFullscreen) { // Chrome
      this.elem.requestFullscreen();
    } else if (this.elem.mozRequestFullScreen) { // Firefox
      this.elem.mozRequestFullScreen();
    }
}

ngOnDestroy() {
    this.document.removeEventListener('fullscreenchange', this.onFullscreenChange.bind(this));
    this.document.removeEventListener('mozfullscreenchange', this.onFullscreenChange.bind(this));
}

onViewFrame() 函数与页面上按钮的单击事件相关联。

每次构造此组件时，都会添加事件，但永远不会删除它们。因此，如果在页面浏览 session 期间加载该组件 3 次，则每次启动全屏或使用 ESC 键退出全屏时，都会触发 console.log 3 次。希望在离开时删除这些事件，以便下次可以正确地重新注册。

Answer 1

this.onFullscreenChange.bind(this) 创建对该函数的新引用。您需要将相同的引用传递给 addEventListener 和 removeEventListener。

elem: any;
fsEventHandler: any = this.onFullscreenChange.bind(this); // <- Here

ngOnInit() {
  this.elem = this.document.documentElement;
  this.document.addEventListener('fullscreenchange', this.fsEventHandler);
  this.document.addEventListener('mozfullscreenchange', this.fsEventHandler);
}

ngOnDestroy() {
    this.document.removeEventListener('fullscreenchange', this.fsEventHandler);
    this.document.removeEventListener('mozfullscreenchange', this.fsEventHandler);
}

参见MDN以获得更多解释。