Ajouter (@host) écouteur pour le changement en plein écran

Question

Je veux détecter si le mode fullsceen est activé en utilisant le HTML5 fullscreen API. J'utilise Chrome et Angular 4.x.

J'ai créé un élément angulaire et ajouté suivant @HostListener:

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

Cela ne fonctionne pas pour une raison quelconque. J'ai essayé de supprimer le préfixe du navigateur, en capturant d'autres événements comme webkitFullscreenEnabled, mais tout cela n'a pas aidé.

Des suggestions? Merci.

Answer 1

j'ai pu le faire en javascript pur

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

Vous pouvez aussi faire quelque chose comme

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

Bien que ne pas oublier dans ce dernier exemple que si vous obtenez plusieurs objets où vous avez cette ligne, le document est un singleton. Alors soyez conscient. Personnellement, à une fonction où j'ai modifié une variable à l'intérieur, mais plusieurs instances de l'objet contenant ce rappel existaient, donc le même document a été écrasé.

Mais alors si vous voulez le faire de manière angulaire. Vous avez la bonne approche. J'ai le même code mais mon événement est de type 'any'. Je ne pense pas que l'événement soit de type KeyboardEvent. Cela pourrait être votre problème.