微前端通信的Angular自定义事件实现

Question

我已经用webpack module federation插件创建了一个微前端应用。

我正在尝试使用angular自定义事件从主机发送一些数据到远程应用程序。

我能够发送数据从主机到远程如下所示

主机应用程序:

const customEvent = new CustomEvent('test', { detail: { data: formId } });
window.dispatchEvent(customEvent);

远程应用程序:

我已经尝试过使用Renderer2和fromEvent，但没有运气。

我在远程应用程序中获得事件，但当我试图显示事件值时，它没有绑定到远程应用程序中声明的任何变量。

constructor(private renderer: Renderer2) { }
this.handler = this.renderer.listen(
'window',
'test',
({ detail }: CustomEvent) => {
console.log('angular==> ', detail.data);
this.details=detail.data;
console.log('this.details==> ', this.details);
}
);

当我试图访问this.details在我的html中，如下所示，它不显示值

日志语句在控制台打印值，但是html页面没有显示绑定值到"details"字符串。

<p>Details of {{details}}</p>

你能帮我一下吗?如果我在这里遗漏了什么，请告诉我。

提前感谢。

Answer 1

可能是因为Angular的变化检测在监听监听器时没有触发。

尝试手动检查，实例化它，并在分配给details后检测更改:

constructor(private renderer: Renderer2, private ref: ChangeDetectorRef) {
...
this.details=detail.data
this.ref.detectChanges()
...
}