angularjs - HostListener 和 Angular 通用

Question

我正在尝试在 Angular 2 组件中监听使用 postMessage 发送的 MessageEvent 。

我的第一次尝试只是做:

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

然后在ngOnDestroy中:

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

但是这并没有按预期工作。如果我导航到另一条路线并返回，则会注册两个事件监听器。

所以我一直在尝试用 HostListener 来装饰该方法，但在使用预渲染时我无法正常工作(Angular Universal 与 .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。 “重复事件”@HostListener 问题仍然存在。 :-(

编辑＃2:我也像您尝试过的那样使用 window.addEventListener ，并且也遇到了同样的问题，尽管在 ngOnDestroy() 中使用了 window.removeEventListener 。

这让我更深入地挖掘，我发现了一些我添加的代码来监听来自子 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);

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