Angular 2和全屏API

我查看了文檔和示例，但沒有找到在「文檔」元素上監聽「onfullscreenchange」事件和/或它的變體（「onwebkitfullscreenchange」等）的方法。Angular 2和全屏API

我所沒有成功嘗試：

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

所有與更常見的事件，如onclick事件上面的工作。

如果你已經想出了一種將fullscreen API與Angular 2集成的方法，或者有關於如何去做或嘗試的其他想法或建議，我會非常感謝你的幫助。

編輯：如果你能指點我一個有用的資源，這可能會demistify（甚至部分），我將不勝感激。謝謝！

ANSWER document:webkitfullscreenchange（等等的其他瀏覽器）

來源

2017-02-16 Radu Andrei

有作爲onfullscreenchange事件類型沒有這樣的事情。這是事件處理，所以你可以做（但可能是不應該的，因爲它不是真正這樣做的「角辦法」）：

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

但有一個fullscreenchange事件，所以這應該工作精細：

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

來源

2017-02-16 19:28:38

的「onfullscreenchange」是標準的，但如果你看看文檔的API https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API你會看到每個瀏覽器都實現了不同的事件處理程序，而不是標準，除非我讀錯了。除此之外，我剛剛測試過你的建議，它不起作用。也許我錯過了一些東西，但我無法弄清楚。 –

所以它實際上是瀏覽器前綴 - >對於chrome文檔：webkitfullscreenchange。但它的工作。但是，由於某些原因，如果使用F11默認鍵綁定進行全屏顯示，則不會觸發該事件。您可以手動觸發它，在F11/ESC上通過各自鍵盤上的偵聽器進行觸發。 –

Angular 2和全屏API

回答

相關問題