如何在 Angular 9 中接收 window.postmessage 事件 - Javascript

在 Angular 9 中，你可以使用 @HostListener 装饰器来监听来自 window 对象的 message 事件。下面是如何做到的。

首先，我们需要在 Angular 组件中添加以下代码来创建一个事件监听器：

@HostListener('window:message', ['$event'])
onMessage(event: MessageEvent) {
  // 处理来自 window 对象的信息
}

该代码将创建一个名为 onMessage 的方法，该方法将被用作来自 window 对象的消息事件的处理程序。该事件将带有一个 MessageEvent 参数，该参数包含来自 window 对象的信息。

接下来，我们需要注册监听器以便在组件加载时开始接收消息。我们可以在组件的构造函数中注册监听器，如下所示：

constructor() {
  window.addEventListener('message', this.onMessage.bind(this));
}

在这里，我们使用 addEventListener 方法来将事件监听器附加到 window 对象上。由于 this 可能与我们希望的不同，因此我们还需要使用 bind 方法将它绑定到当前组件实例上，这将确保我们能够在 onMessage 方法内部访问当前组件的属性和方法。

最后，我们还需要在组件销毁时取消监听器。我们可以像下面这样在组件的 ngOnDestroy 生命周期钩子中取消它：

ngOnDestroy() {
  window.removeEventListener('message', this.onMessage);
}

完整的代码如下所示：

import { Component, OnDestroy, HostListener } from '@angular/core';

@Component({
  selector: 'app-post-message',
  templateUrl: './post-message.component.html',
  styleUrls: ['./post-message.component.css']
})
export class PostMessageComponent implements OnDestroy {

  constructor() {
    window.addEventListener('message', this.onMessage.bind(this));
  }

  ngOnDestroy() {
    window.removeEventListener('message', this.onMessage);
  }

  @HostListener('window:message', ['$event'])
  onMessage(event: MessageEvent) {
    // 处理来自 window 对象的信息
  }

}

上述代码创建了一个名为 PostMessageComponent 的组件，并在其中添加了一个 onMessage 方法来处理来自 window 对象的消息事件。它还在组件的构造函数中注册了该方法作为事件监听器，以及在其 ngOnDestroy 生命周期钩子中取消了监听器。

现在，我们已经在 Angular 9 中成功地接收了从 window 对象发送的 message 事件。