首页 文章

在Angular 2中收听事件

提问于
浏览 次
1

我觉得这应该很容易，但我无法让它发挥作用 . 我正在使用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'));
};

但无论我尝试什么，它永远不会选择事件 . 我真的希望我错过了一些非常明显的东西，如果有人能指出它我会非常感激 .

angular angular2-components

2 回答

  • 0

    像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'));
}
    回复于
  • 3
    @HostListener('document:screenfull.raw.fullscreenchange')
onFullScreenToggle() {
    console.log('Angular - Am I fullscreen? ' + (screenfull.isFullscreen ? 'Yes' : 'No'));
};

    我是'm not sure if HostListener will automatically pick up on another library'的自定义事件，但通常使用HostListener，如果要订阅来自 document 或 window 的事件，则需要在事件前加 document: 或 window: .

    如果这不起作用，您可能会被迫使用onInit方法或考虑通过Observable.fromEvent公开事件 .

    回复于

相关问题