角度2のイベントを聞く

Question

これは本当に簡単なはずですが、動作させることができないと感じています。私はscreenfullを使用していますが、これはブラウザをフルスクリーンにするために使用しているテーマに含まれています。フルスクリーンモードで動作しているかどうかにかかわらず、fullscreenchangeイベントに接続しようとしています。私は予想通り、これはコンソールに出力ngOnInit方法私のコンポーネントでこれを置く場合

document.addEventListener(screenfull.raw.fullscreenchange,() => { 
 
    console.log('Am I fullscreen? ' + (screenfull.isFullscreen ? 'Yes' : 'No')); 
 
});

：ドキュメントは明らかにこれを行うために、次の例を述べています。

@HostListener('screenfull.raw.fullscreenchange') 
 
onFullScreenToggle() { 
 
    console.log('Angular - Am I fullscreen? ' + (screenfull.isFullscreen ? 'Yes' : 'No')); 
 
};

しかし、私はそれを試して何どんなに：しかし、私は、これはので、私は次のように@HostListenerデコレータを使用してそれを実装しようとした角度で​​この状況に対処するための正しい方法ではありません知っていますイベントを拾うことはありません。私は本当に明白な何かを逃したことを本当に望んでいます。もし誰かがそれを指摘できたら、私は非常に感謝しています。

私はあなたが document:かのいずれかで、あなたのイベントの前に付ける必要がある documentまたは windowからイベントをサブスクライブしたい場合HostListenerは自動的に別のライブラリのカスタムイベントではなくHostListenerと、一般的にピックアップするかどうかわからないんだけど

Answer 1

（必要な場合やwindow:）ジェシーは、document:との最初の接頭辞を言ったように、 しかし予告あなたがお使いの場合

document.addEventListener(screenfull.raw.fullscreenchange,() => { ... }); 

をあなたはaddEventListenerへの最初の文字列引数としてscreenfull.raw.fullscreenchangeを送ったので、私はscreenfull.raw.fullscreenchangeを推測していますイベント名を表す文字列であるので、次のように私はそれを追加する想像働くかもしれない：

@HostListener('document:' + screenfull.raw.fullscreenchange) 
onFullScreenToggle() { 
    console.log('Angular - Am I fullscreen? ' + (screenfull.isFullscreen ? 'Yes' : 'No')); 
} 

Answer 2

@HostListener('document:screenfull.raw.fullscreenchange') 
onFullScreenToggle() { 
    console.log('Angular - Am I fullscreen? ' + (screenfull.isFullscreen ? 'Yes' : 'No')); 
}; 

window:。

これが機能しない場合は、onInitアプローチを使用するか、Observable.fromEventを介してイベントを公開することを余儀なくされる可能性があります。