时间戳

首页 > 解决方案 > 限制用户在 Angular 8 中退出全屏模式

angular - 限制用户在 Angular 8 中退出全屏模式

问题描述

我正在为我的应用程序使用Angular v8。我的问题是我想限制用户退出全屏模式。我在 Stack Overflow 上查看了各种解决方案并找到了一个。下面是我尝试实现的代码：

 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)

我不知道是否有使用@HostListenerfor angular 的东西来处理这个问题。请帮忙。

标签： angulargoogle-chromeevent-handlingfullscreenchange

解决方案

我看到这个问题有点老了，但可能对其他人有帮助 - 以前我遇到过同样的问题并找到以下解决方案@HostListener：

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

从这个答案：https ://stackoverflow.com/a/42282972/1362723 。

推荐阅读