Question

我试图在我的Angular 2组件中收听与postMessage一起发送的MessageEvent。

我的第一次尝试就是：

window.addEventListener("message", this.handlePostMessage.bind(this));

然后在ngOnDestroy：

window.removeEventListener("message", this.handlePostMessage.bind(this));

然而，这并没有像预期的那样奏效。如果我导航到另一条路线并返回，则会注册两个事件监听器。

所以相反，我一直试图用HostListener来修饰方法，但是在使用预渲染时（Angular Universal with .NET Core使用asp-prerender-module）我无法解决这个问题。）。

@HostListener('window:message', ['$event'])
private handlePostMessage(msg: MessageEvent) {
    ...
}

这会在页面加载时出现以下错误：

Exception: Call to Node module failed with error: Prerendering failed because of error: ReferenceError: MessageEvent is not defined

有解决方法吗？

Answer 1

您收到此错误，因为未定义MessageEvent。您必须导入任何定义此文件的文件。

我的@HostListeners看起来像这样：

@HostListener("window:savePDF", ["$event"]) savePDF(event) {
    this.savePDFButtonPushed();
}

你可以在这里阅读更多相关信息：

https://angular.io/guide/attribute-directives

但是，我目前遇到了同样的问题 - 如果我导航到另一条路线并返回，我现在收到两个事件。这是使用@HostListener。 :-(但是我暂时没有升级Angular（目前使用的是4.4.6），所以也许他们自那次发布以来已经修复了它。

**编辑：刚升级到Angular 5.1.0。重复事件＆＃39; @HostListener问题仍然存在。： - （

编辑＃2：尽管在ngOnDestroy（）中使用了window.removeEventListener，我也尝试使用了像你尝试过的window.addEventListener，并且也有同样的问题。

这让我深入挖掘，在那里我找到了一些代码，我已经添加了一些代码来收听来自孩子iFrame的消息。您的代码中是否有类似的东西？

        var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
        var eventer = window[eventMethod];
        var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

                // Listen to messages from child window ("unsign" and "savePDF") and pass those along as events to Angular can pick them up in its context
        eventer(messageEvent,function(e) {
            window.dispatchEvent( new Event( e.data ) );
        },false);

这是我网页的构造函数。我保护它所以它只执行第一次时间页面是构造函数，现在一切都很好。

HostListener和Angular Universal

1 个答案: