single-spa-angular - 将单水疗容器应用程序与 Angular 子应用程序通信

Question

我需要帮助才能从我的容器单水疗中心与加载的 Angular 应用程序（子项）进行通信。当用户单击父应用程序（ spa-container ）选项时，应与子应用程序通信以更改模式。

它不会经常发生。但无法找到从容器到加载的角度应用程序的通信方式。

spa本身给出了一个细节：spa-communication detail but not clear 也没有详细的步骤。有人帮我吗？

Answer 1

我是 single-spa 的维护者之一。

我们倾向于在文档中对如何实现模块之间的通信持轻描淡写的看法，因为有很多方法可以实现它，每种方法都有优缺点。在您描述的情况下，听起来您可能想从您发布的链接中探索选项#3。

自定义浏览器事件

在父级中，您在窗口上触发自定义事件。MDN 上的 API。

快速示例

//  in the parent (usually called the single-spa config or root-config in the documentation)
const event = new CustomEvent("myEvent", {favoriteMovie: 'StarWars'})
window.dispatchEvent(event)

// in the child (or registeredApplication)
window.addEventListener("myEvent", myEventHandlingFunction)

function myEventHandlingFunction(e) {...}

这至少应该让你开始，还有其他的沟通选择，而且这种特殊的方法并不是在所有情况下都是最好的解决方案。

还值得注意的是，除非您包含 polyfill，否则 customEvents 在 IE11 中不起作用。