在Angular 2中收聽事件

Question

我覺得這應該很容易，但我無法讓它發揮作用。 我正在使用screenfull ，它包含在我用來使瀏覽器全屏的主題中。 我試圖掛鈎到fullscreenchange事件，以便在全屏模式下執行操作。 文檔清楚地說明了以下示例：

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

如果我把它放在我的組件ngOnInit方法中，它會按預期輸出到控制台。 但我知道這不是在Angular中處理這種情況的正確方法，所以我嘗試使用@HostListener裝飾器實現它，如下所示：

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

但無論我嘗試什么，它永遠不會選擇事件。 我真的希望我錯過了一些非常明顯的東西，如果有人能指出它我會非常感激。

Answer 1

就像Je​​sse所說的那樣，首先使用document:前綴document:或window:如果需要），但在使用時請注意：

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

你發送screenfull.raw.fullscreenchange作為addEventListener的第一個字符串參數，所以我猜測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'));
};

我不確定HostListener是否會自動獲取另一個庫的自定義事件，但通常使用HostListener，如果要從document或window訂閱事件，則需要在事件前添加document:或window: 。

如果這不起作用，您可能會被迫使用onInit方法或考慮通過Observable.fromEvent公開事件。