Question

我看过文档和示例，却发现没有办法在“document”元素上监听“onfullscreenchange”事件和/或它的变体（“onwebkitfullscreenchange”等）。

我尝试过但没有成功：

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

上述所有工作都涉及更常见的事件，例如onclick事件。

如果您已经找到了将fullscreen API与Angular 2集成的方法，或者有关于如何进行或尝试此操作的其他想法或建议，我将非常感谢您的帮助。

编辑：如果你能指出一个有用的资源，这可能会使（甚至部分）消除这种情况，我会非常感激。谢谢！

ANSWER document:webkitfullscreenchange（等等其他浏览器）

Answer 1

没有onfullscreenchange事件类型。这是事件处理程序，所以你可以这样做（但可能不应该这样做，因为它不是真正的＆＃34; Angular方式＆＃34;这样做）：

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

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

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

Answer 2

以下是使用布尔变量检查全屏或退出全屏的示例。

 @HostListener('document:fullscreenchange', ['$event'])
 @HostListener('document:webkitfullscreenchange', ['$event'])
 @HostListener('document:mozfullscreenchange', ['$event'])
 @HostListener('document:MSFullscreenChange', ['$event'])
  fullscreenmode(){

    if(this.toggleClass == 'ft-minimize'){
      this.toggleClass = 'ft-maximize';
    }
    else{
      this.toggleClass = 'ft-minimize';
    }
    console.log(this.toggleClass)
  }

演示：https://stackblitz.com/edit/fullscreen-closefullscreen-check?file=src%2Fapp%2Fapp.component.ts

Answer 3

@HostListener('document:fullscreenchange')
@HostListener('document:webkitfullscreenchange')
@HostListener('document:mozfullscreenchange')
@HostListener('document:MSFullscreenChange')
onScreenModeСhange() {
    //Do stuff
}

Angular 2和全屏API

3 个答案: