Angular 2 和全屏 API [英] Angular 2 and fullscreen API

问题描述

我已经仔细查看了文档和示例，但发现无法侦听文档"元素上的onfullscreenchange"事件和/或其变体(onwebkitfullscreenchange"等).

I've looked trough the docs and examples, yet found no way to listen for the "onfullscreenchange" event and/or it's variants ("onwebkitfullscreenchange" etc.) on the "document" element.

我尝试过但没有成功:

/*method 1*/    
host: {
      '(document:onwebkitfullscreenchange)': 'fullScreen()'
    }
/*method 2*/
    @HostListener("document:onwebkitfullscreenchange", []) fullScreen() {}
/*method 3*/
    renderer.listenGlobal('document', 'onwebkitfullscreenchange', (event) => {})

以上所有这些都适用于更常见的事件，例如 onclick 事件.

All of the above work with the more common events such as onclick event.

如果您已经找到了将 fullscreen API 与 Angular 2 集成的方法，或者对如何进行或尝试这样做有其他想法或建议，我将非常感谢您的帮助.

If you've figured out a way to integrate the fullscreen API with Angular 2 or have other ideas or suggestions on how to go about or attempt this, i'd be very appreciative of your help.

如果您能给我指出一个有用的资源，这可能会消除(甚至部分)这一点，我将不胜感激.谢谢！

If you could point me to a helpful resource, that might demistify (even partially) this, i would greatly appreciate it. Thank you!

答案document:webkitfullscreenchange(其他浏览器以此类推)

ANSWER document:webkitfullscreenchange (and so forth for the other browsers)

推荐答案

onfullscreenchange 事件类型是不存在的.那是事件处理程序，所以你可以做(​​但可能不应该，因为这不是真正的Angular 方式"):

There is no such thing as an onfullscreenchange event type. That's the event handler, so you could do (but probably shouldn't, as it's not really the "Angular way" of doing this):

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

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

But there is a fullscreenchange event, so this should work fine:

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

这篇关于Angular 2 和全屏 API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！