在 nx 工作区中的两个 Angular 应用程序之间传输数据

Question

是否可以在 nx 工作空间中的两个 Angular 应用程序之间传输数据

我们可以通过使用共享库在库之间共享数据。我尝试在 nx 工作区中创建两个 Angular 应用程序，并且我试图在它们之间共享数据..

Answer 1

当您谈论在浏览器中单独运行的两个不同的 Angular 应用程序时，它们无法直接通过服务共享数据，因为它们是在浏览器中运行的不同实例。

这两个应用程序是否由同一域提供服务？

如果是这样，您可以使用 localStorage 或 seassionStorage。

// In app1
localStorage.setItem('formData', JSON.stringify(data));

// In app2
const formData = JSON.parse(localStorage.getItem('data'));

顺便说一句：我会使用 NGRX 或 NGXS 进行状态管理。我最喜欢NGXS。

否则你需要创建服务器端通信。

一个应用程序可以使用 HTTP 请求进行通信，而另一个应用程序则使用 WebSocket 侦听和检索数据。

Answer 2

如果您正在运行 2 个不同的 nx 应用程序，则无法共享数据。它们是两个不同的环境。要共享数据，您需要通过服务器（如果需要实时，则可能是网络套接字）。 如果它是相同的域，您可以使用 localStorage 但我很确定您无法实时侦听 localstorage 的更改。 还取决于您是否将应用程序作为单独的环境运行，因为您可以使用微前端方法，其中您有多个应用程序，但在浏览器（选项卡/窗口）中具有相同的环境。在这种情况下，您可以共享数据，因为两个应用程序将具有相同的窗口对象。您还可以设置 redux 或类似的数据存储来用作两者之间的通信。但这是假设两个应用程序在同一页面中运行的情况。 在大多数情况下，您不需要微前端方法，因为在大多数情况下，库方法已经足够分离。原因之一是，如果您有多个 MS，并且每个 MS 都希望托管自己的“前端”部分，而不是在一个地方为整个前端提供服务。