添加 (@host) 侦听器以进行全屏更改

Question

我想检测是否使用 HTML5 启用了 fullsceen 模式fullscreen API。我正在使用Chrome和Angular 4.x。

我创建了一个 Angular 组件并添加了以下内容@HostListener：

@HostListener('document:webkitfullscreenchange', [$event])
FSHandler(event: KeyboardEvent) {
  console.log('fullscreen mode changed...');
}

由于某种原因，这不起作用。我试过删除浏览器前缀，捕获其他事件，如webkitFullscreenEnabled，但所有这些都没有帮助。

有什么建议？谢谢。

Answer 1

您需要处理fullscreenchange应用程序将打开的 Browser/browserkit的事件，从我见过的大多数指南中，有四个。我就是这样做的（我是 Angular 新手，所以可能有更好/更干净的方法），

@HostListener('fullscreenchange', ['$event'])
@HostListener('webkitfullscreenchange', ['$event'])
@HostListener('mozfullscreenchange', ['$event'])
@HostListener('MSFullscreenChange', ['$event'])
screenChange(event) {
  console.log(event);
}

这会检测我尝试过的每个浏览器（OSX 上的桌面浏览器和 Android 上的移动浏览器）中的变化。

Answer 2

我能够用纯 javascript 做到这一点

this.document.addEventListener('webkitfullscreenchange', () => {
  console.log('fullscreen mode changed...');
})

你也可以做类似的事情

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

尽管不要忘记在最后一个示例中，如果您在具有此行的位置获得多个对象，则文档是单例。所以要注意。我个人在一个函数中修改了内部变量，但包含该回调的对象的多个实例存在，因此同一个文档被覆盖。

但如果你想用 Angular 的方式来做。你采取了正确的方法。我确实有相同的代码，但我的事件类型为“any”。我认为该事件不是 KeyboardEvent 类型。那可能是你的问题。