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

Question

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

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

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

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

有什么建议吗？谢谢。

Answer 1

您需要处理应用程序将打开的浏览器/浏览器工具包的fullscreenchange事件，从我看到的大多数指南来看，有四个。 这就是我的做法(我是一个 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"。我不认为该事件属于键盘事件类型。这可能是你的问题。