在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中收听活动

回答

相关问题