Запретить пользователю выход из полноэкранного режима в Angular 8

Question

Я использую Angular v8 для моего приложения. Моя проблема в том, что я хочу запретить пользователю выходить из полноэкранного режима. Я посмотрел различные решения по переполнению стека и нашел одно. Ниже мой код, где я пытался реализовать это:

 ngOnInit() {
   this.attachEventListeners();
 }

 attachEventListeners() {
    document.addEventListener('fullscreenchange', this.onFullScreenChange(), false);
    document.addEventListener('webkitfullscreenchange', this.onFullScreenChange(), false);
    document.addEventListener('mozfullscreenchange', this.onFullScreenChange(), false);    
  }

  onFullScreenChange() {
    const fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;

    console.log(fullscreenElement);
    // if in fullscreen mode fullscreenElement won't be null
  }

Но этот код выдает ошибку:

ExamComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: Cannot read property 'instance' of undefined
    at nodeValue (core.js:27236)
    at Object.eval [as handleEvent] (ExamComponent_Host.ngfactory.js? [sm]:1)
    at handleEvent (core.js:38098)
    at callWithDebugContext (core.js:39716)
    at Object.debugHandleEvent [as handleEvent] (core.js:39352)
    at dispatchEvent (core.js:25818)
    at core.js:37030
    at platform-browser.js:1789
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:34182)

Я не знаю, есть ли что-то, используя @HostListener для угловых есть для обработки этого. Пожалуйста помоги.

Answer 1

Я вижу, что этот вопрос немного устарел, но, вероятно, он будет полезен для кого-то другого - ранее я сталкивался с тем же вопросом и нашел следующее решение с @HostListener:

  @HostListener("document:fullscreenchange", []) 
  fullScreen() {
    if (document.fullscreenElement) {
        console.log(`Entered full-screen mode.`);
    } else {
        console.log('Leaving full-screen mode.');
    }
  }

из этого ответа: /questions/1481009/angular-2-i-polnoekrannyij-api/1481017#1481017.

Answer 2

Используйте hostlistner для этого

например

 import { Component,HostListener } from '@angular/core';

 @HostListener('window:resize', ['$event'])
  onResize(event){

  if (event.target.screen.width < 1170) {
   **something
  } else
  **something
  }

Это будет работать