Angular 2 и полноэкранный API

Question

Я просмотрел документы и примеры, но не нашел способа прослушать событие "onfullscreenchange" и / или его варианты ("onwebkitfullscreenchange" и т. Д.) В элементе "document".

Что я пробовал без успеха:

/*method 1*/    
host: {
      '(document:onwebkitfullscreenchange)': 'fullScreen()'
    }
/*method 2*/
    @HostListener("document:onwebkitfullscreenchange", []) fullScreen() {}
/*method 3*/
    renderer.listenGlobal('document', 'onwebkitfullscreenchange', (event) => {})

Все вышеперечисленное работает с более распространенными событиями, такими как onclick событие.

Если вы нашли способ интегрировать fullscreen API с Angular 2 или у вас есть другие идеи или предложения о том, как это сделать или попытаться сделать это, я был бы очень признателен за вашу помощь.

Изменить: Если бы вы могли указать мне на полезный ресурс, который может демистифицировать (даже частично) это, я был бы очень признателен. Спасибо!

ОТВЕТdocument:webkitfullscreenchange (и так далее для других браузеров)

Answer 1

Нет такой вещи как onfullscreenchange тип события. Это обработчик событий, так что вы можете это сделать (но, вероятно, не следует, поскольку это не совсем "угловой способ" сделать это):

document.onfullscreenchange = () => console.log('fullscreenchange event fired!');

Но есть fullscreenchange событие, так что это должно работать нормально:

@HostListener("document:fullscreenchange", []) fullScreen() {}

Answer 2

Вот пример проверки полноэкранного режима или выхода из полноэкранного режима с использованием логической переменной.

 @HostListener('document:fullscreenchange', ['$event'])
 @HostListener('document:webkitfullscreenchange', ['$event'])
 @HostListener('document:mozfullscreenchange', ['$event'])
 @HostListener('document:MSFullscreenChange', ['$event'])
  fullscreenmode(){

    if(this.toggleClass == 'ft-minimize'){
      this.toggleClass = 'ft-maximize';
    }
    else{
      this.toggleClass = 'ft-minimize';
    }
    console.log(this.toggleClass)
  }

Демонстрация: https://stackblitz.com/edit/fullscreen-closefullscreen-check?file=src%2Fapp%2Fapp.component.ts

Answer 3

@HostListener('document:fullscreenchange')
@HostListener('document:webkitfullscreenchange')
@HostListener('document:mozfullscreenchange')
@HostListener('document:MSFullscreenChange')
onScreenModeСhange() {
    //Do stuff
}