如何正确地将事件侦听器附加到 Angular 6+ 中的全局“窗口”？ [复制]答案

【问题标题】：How to properly attach an Event Listener to global 'window' in Angular 6+? [duplicate]如何正确地将事件侦听器附加到 Angular 6+ 中的全局“窗口”？ [复制]
【发布时间】：2019-04-26 05:34:18
【问题描述】：

背景

我们的Angular 6 应用程序包含一个iframe 和一些第3 方数据。为了实现安全的跨域通信，子 iframe 使用 window.postMessage() API 将消息发布到父 Angular 应用程序。为了接收这些消息，父窗口必须附加一个像window.addEventListener("message", callback) 这样的事件监听器来监听MessageEvents

问题

我需要在 Angular 组件中侦听消息事件，而如何以 Angular 方式正确访问全局 window 对我来说并不明显。我目前想到的唯一解决方案是：

使用以下方法创建一个名为 MessageListenerService 的 Angular 服务：

function listenForMessageEvent(callback) { this.renderer.listen('window', 'message', callback); }

注意： this.renderer 这里是来自 Angular 核心的 Renderer2。

只需在我的自定义组件中使用MessageListenerService.listenForMessageEvent()。

我觉得这不是 Angular 世界的标准方法。有人可以在这里建议任何最佳做法吗？

非常感谢。

【问题讨论】：

标签： javascript angular dom iframe postmessage

【解决方案1】：

“Angular”的做法是使用HostListener

https://angular.io/api/core/HostListener

这是一个 stackblitz 示例供您查看。使用键盘上的按键触发事件时，打开控制台并查看日志。

https://stackblitz.com/edit/hostlistener-1

【讨论】：