添加（@host）侦听程序以进行全屏更改

我想检测是否使用HTML5 fullscreen API启用了fullsceen模式。我正在使用Chrome和Angular 4.x。添加（@host）侦听程序以进行全屏更改

我创建了一个角度成分，并添加以下@HostListener：

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

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

有什么建议吗？谢谢。

来源

2017-08-25 yluijten

看起来像应该工作。我有类似的功能。可能你还需要导入'HostListener'？不过，我希望TypeScript已经对你大吼了。 – jmq

我能够做到这一点在纯JavaScript

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

你也可以做类似

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

虽然在最后一个例子，不要忘记，如果你得到你有多个对象这一行，文件是一个单身人士。所以要注意。我个人在一个函数里面修改了一个变量，但包含该回调的对象的多个实例存在，所以同一个文档被覆盖。

但是，如果你想这样做的方式。你有正确的做法。我有相同的代码，但我的事件类型为'任何'。我不认为这个事件是KeyboardEvent类型的。这可能是你的问题。

来源

2018-01-19 21:49:54 MThi

添加（@host）侦听程序以进行全屏更改

回答

相关问题