javascript - 如何正确地将事件侦听器附加到 Angular 6+ 中的全局“窗口”?
问题描述
背景
我们的Angular 6
应用程序包含iframe
一些第 3 方数据。为了实现安全的跨域通信,子 iframe 使用window.postMessage() API 将消息发布到父 Angular 应用程序。为了接收这些消息,父窗口必须附加一个事件监听window.addEventListener("message", callback)
器来监听MessageEvents
问题
我需要在 Angular 组件中侦听消息事件,而如何以window
Angular 方式正确访问全局对我来说并不明显。我目前想到的唯一解决方案是:
- 创建一个
MessageListenerService
使用以下方法调用的 Angular 服务:
function listenForMessageEvent(callback) {
this.renderer.listen('window', 'message', callback);
}
注意: this.renderer
这里是来自 Angular 核心的Renderer2 。
- 只需
MessageListenerService.listenForMessageEvent()
在我的自定义组件中使用。
我觉得这不是 Angular 世界的标准方法。有人可以在这里建议任何最佳做法吗?
非常感谢。
解决方案
这样做的“Angular”方法是使用HostListener
https://angular.io/api/core/HostListener
这是一个 stackblitz 示例供您查看。使用键盘上的键触发事件时,打开控制台并查看日志。
推荐阅读
- reactjs - 如何让我的 React Button 组件仅在特定页面上更新 CSS?
- javascript - JQuery在ul中选择特定元素
- python - 如何在 Python 中使用 PIL 时修复内存错误
- node.js - 在 Azure-Function 中安装 Sharp 时出错
- tags - 如何命名使用 terraform 配置的 eks 工作节点?
- python - 等高线图中的颜色未映射到级别,而是映射到其他一些参数 [python]
- angular - RXJS catchError 不捕获网络故障错误
- python - Tensorflow 2残差块,加法
- python - pyspark:如何简化两个 .over 操作?
- regex - vim 全局命令匹配多行并合并它们