Удаление полноэкранного прослушивателя событий в ngOnDestroy - PullRequest
Новая
       24

Удаление полноэкранного прослушивателя событий в ngOnDestroy

0 голосов
/ 22 апреля 2019

Не удается удалить прослушиватель событий fullscreenchange в ngOnDestroy Angular 6

Я пытался вызвать .removeEventListener () в ngOnDestroy, который не удаляет события.Я также попытался вызвать removeEventListeners в функции после 10-секундного тайм-аута, и события по-прежнему продолжают срабатывать после.

import 

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 () связана с событием нажатия кнопки на странице.

Каждый раз, когда создается этот компонент, события добавляются, но они никогда не удаляются.Таким образом, если этот компонент загружается 3 раза во время сеанса просмотра на странице, он будет запускать console.log три раза каждый раз, когда запускается полный экран или клавиша ESC используется для выхода из полноэкранного режима.Хотел бы, чтобы события удалялись после отъезда, чтобы в следующий раз их можно было правильно перерегистрировать.

Ответы [ 2 ]

4 голосов
/ 22 апреля 2019

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 для получения дополнительных пояснений.

2 голосов
/ 22 апреля 2019

Поскольку вы используете Angular, вы можете использовать RxJS для достижения того же поведения.

Вы можете создать Observable, используя fromEvent

fromEvent(this.document, 'fullscreenchange');

Для запуска какой-либо функции вам необходимо добавить .pipe() с оператором tap, чтобы активировать ее, вам также необходимо подписаться на нее. Также сохраните подписку, чтобы иметь возможность отписаться внутри ngOnDestroy()

ngOnInit() {
    this.elem = this.document.documentElement;
    console.log(this.document);
    this.fullScreen = fromEvent(this.document, 'fullscreenchange').pipe(
        tap(this.onFullscreenChange.bind(this))
      ).subscribe();
 }

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

ngOnDestroy() {
  this.fullScreen.unsubscribe();
}
...