在同一页面（SPA）上初始化和通信多个Angular应用程序

Question

我只是开始考虑两个有角度的（或其他框架）应用程序之间的通信-这样做的最佳方法是什么。

现在，在我的应用程序中，我使用iframe来包含第二个应用程序，然后感谢postMessage（docs）我可以处理应用程序之间的操作。

但是，此解决方案变得很难维护，因为我并不希望我不得不处理太多类型的事件。

让我们举个例子： 在Facebook上，当您转到某人资料时，可以单击“发送消息”，它将在聊天应用程序上打开一个新窗口。您也可以通过其他方式单击其聊天中的某个按钮，它将向“主”应用程序发送一些操作。

我只读了几篇文章，并开始考虑使用WebSockets，使用firebase等，但是我想做更多研究，并询问更多过期的开发人员（是的，您！:)）他们的想法。

所以，我的问题是：

1. 包含两个（或多个）角度应用程序的最佳方法是什么？
2. 处理这些应用之间的通信的最佳方法是什么？

Answer 1

听起来您有一个非常有趣的问题要解决。有很多不同的方法可以解决此问题，但是我不确定您的网站架构是如何设置的以及您有什么限制，但是我至少可以提供一些建议。

可能的解决方案

1. 研究将单独的功能分离到延迟加载的Angular模块中，并将它们完全视为单独的网站。

我已经为一些应用程序完成了此操作，它为您提供了所需的灵活性。为了使它与您的应用程序通信约束一起使用，有多种方法可以解决它。

如果您可以只使用一个应用程序，那么您将需要研究诸如NgXS，NgRX，Akita或{{3} }。我个人为这些事情而动摇自己，因为我很少需要较大框架的开销，而需要每个框架。

如果您无法摆脱一个应用程序，那么您将想要将状态分为FireBase或自定义websocket应用程序。这样可以更好地保持状态，还可以将完全独立的Web应用程序彼此连接。

1. roll your own statemanagement工具是解决此类问题的另一个有希望的解决方案。

单个spa是一个元Web框架，可以帮助将以不同库/框架编写的多个SPA导航和编排到单个应用程序中。这样一来，您就可以重复使用<iframe>用于的现有网站，但可以将其捆绑在同一父应用程序中。在实践中，我对这个框架不太熟悉，但是我有一些使用它的同事和同行，并且看起来很有希望。

1. 退后一步，确定您要解决的核心问题

这不是试图进行拖钓或其他任何操作，只是帮助您退后一步，以10,000英尺的概览浏览您的应用程序。查看解决方案中数据的传递方式，您是直接解决问题吗？还是由于一开始的限制而使该解决方案成为黑客。不要害怕重建部分应用程序或服务。人们谈论SingleSpa是有原因的。

我了解时间和复杂性的限制，您有截止日期和其他需要处理的内容。只需确保您正在解决正确的问题，并考虑可以利用的不同优势即可。

---

我在写完此书后认识到说的不是直接说answer，但希望对您有所帮助。如果您对此东西有任何疑问，请联系我。