Angular 2 and fullscreen API

问题

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.

What i've tried without success:

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

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

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.

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

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

回答1:

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!');

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

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

回答2:

Here is an sample for check fullscreen or exit fullscreen use a boolean variable.

 @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)
  }

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

回答3:

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

来源：https://stackoverflow.com/questions/42282343/angular-2-and-fullscreen-api

标签

angular