如何在 Angular 6+ 中正确地将事件监听器附加到全局 'window'？
How to properly attach an Event Listener to global 'window' in Angular 6+?
背景
我们的 Angular 6 应用程序包含一个 iframe 和一些第 3 方数据。为了实现安全的跨域通信，子 iframe 使用 window.postMessage() API. In order to receive those messages parent window must attach an event listener like window.addEventListener("message", callback) to listen for MessageEvents
将消息发布到父 Angular 应用程序
问题
我需要监听 Angular 组件内的消息事件，我不清楚如何以 Angular 方式正确访问全局 window。我目前想到的唯一解决方案是：
- 使用以下方法创建名为
MessageListenerService 的 Angular 服务：
function listenForMessageEvent(callback) {
this.renderer.listen('window', 'message', callback);
}
注意： this.renderer 这里是 Renderer2 from Angular core.
- 只需在我的自定义组件中使用
MessageListenerService.listenForMessageEvent()。
我觉得这不是 Angular 世界的标准方法。有人可以在这里建议任何最佳做法吗？
非常感谢。
"Angular" 的方法是使用 HostListener
https://angular.io/api/core/HostListener
这里有一个 stackblitz 示例供您查看。使用键盘上的按键触发事件时打开控制台并查看日志。
背景
我们的 Angular 6 应用程序包含一个 iframe 和一些第 3 方数据。为了实现安全的跨域通信，子 iframe 使用 window.postMessage() API. In order to receive those messages parent window must attach an event listener like window.addEventListener("message", callback) to listen for MessageEvents
问题
我需要监听 Angular 组件内的消息事件，我不清楚如何以 Angular 方式正确访问全局 window。我目前想到的唯一解决方案是：
- 使用以下方法创建名为
MessageListenerService的 Angular 服务：
function listenForMessageEvent(callback) {
this.renderer.listen('window', 'message', callback);
}
注意： this.renderer 这里是 Renderer2 from Angular core.
- 只需在我的自定义组件中使用
MessageListenerService.listenForMessageEvent()。
我觉得这不是 Angular 世界的标准方法。有人可以在这里建议任何最佳做法吗？
非常感谢。
"Angular" 的方法是使用 HostListener
https://angular.io/api/core/HostListener
这里有一个 stackblitz 示例供您查看。使用键盘上的按键触发事件时打开控制台并查看日志。