Angular 2 和全屏 API答案

【问题标题】：Angular 2 and fullscreen APIAngular 2 和全屏 API
【发布时间】：2019-06-12 15:35:38
【问题描述】：

我查看了文档和示例，但找不到在“document”元素上监听“onfullscreenchange”事件和/或其变体（“onwebkitfullscreenchange”等）的方法。

我尝试过的没有成功：

/*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（其他浏览器以此类推）

【问题讨论】：

标签： angular

【解决方案1】：

没有onfullscreenchange 事件类型这样的东西。这就是事件handler，所以你可以这样做（但可能不应该这样做，因为它不是真正的“Angular 方式”）：

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

但是有一个fullscreenchange 事件，所以这应该可以正常工作：

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

【讨论】：

“onfullscreenchange”是标准，但是如果您查看 API developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API 的文档，您会发现每个浏览器都实现了不同的事件处理程序，而不是标准，除非，我读错了。除此之外，我刚刚测试了你的建议，它不起作用。也许我错过了一些东西，但我无法弄清楚。
所以它实际上是浏览器前缀 -> 用于 chrome document:webkitfullscreenchange。但它有效。但是，由于某种原因，如果您使用 F11 全屏默认键绑定，则不会触发该事件。您已通过各自键码上的侦听器在 F11/ESC 上手动触发它。

【解决方案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

【讨论】：

【解决方案3】：

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

【讨论】：