如何在Angular 6+中将事件侦听器正确附加到全局“窗口”？

Question

背景

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

问题

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

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

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

注意： this.renderer来自Angular核心，Renderer2。

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

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

非常感谢。

Answer 1

执行此操作的“角度”方式是使用HostListener

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

这是一个供您参考的引人注目的示例。使用键盘上的键触发事件时，打开控制台并查看日志。

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