监听 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

@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.

公开事件

Answer 2

就像 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'));
}

监听 Angular 2 中的事件

Listening for event in Angular 2

angular2-components

angular