在Angular 2中收聽活動

我覺得這應該很簡單，但我無法實現。我正在使用screenfull，它包含在我用來使瀏覽器全屏顯示的主題中。我試圖掛鉤fullscreenchange事件來執行操作時，無論是在全屏模式或不。該文件明確指出下面的例子中這樣做的：在Angular 2中收聽活動

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

如果我把這個在我的組件ngOnInit此方法向控制檯輸出符合市場預期。但我知道這是不是來處理角這種情況下，正確的方法，所以我曾嘗試使用@HostListener裝飾如下實現它：

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

但無論怎樣我試試吧從不挑選事件。我真的很希望我錯過了一些非常明顯的東西，如果有人能指出，我會非常感激。

來源

2017-03-01 Chris Sainty

像傑西說，第一前綴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')); 
}

來源

2017-03-01 14:43:12 Amit

乾杯阿米特，完美的工作 –

@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公開事件。

來源

2017-03-01 14:06:14

謝謝傑西，我已經試過用文檔和窗口的前綴，但沒有喜悅。 –

出於好奇，在你的第一個例子中，在使用addEventListener的時候是什麼'screenfull.raw.fullscreenchange'？我注意到它沒有用引號包裹。它實際上是一個變量嗎？ –

在Angular 2中收聽活動

回答

相關問題