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

像Jesse所说的那样，第一个前缀为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公开事件。

在Angular 2中收听事件

2 个答案: