Question

情况：我有一个由前端Angular应用和许多Angular库组成的微型前端，这些Angular库作为包含作为“子应用”的组件的模块导入。

目标：我想在所有子应用程序之间共享在主机应用程序中创建的NGXS存储，以便每个子应用程序都有自己的全局状态片段，并且可以访问以及全球状态。

在主机应用中，我正在按以下方式创建状态：

@State<ApplicationStateModel>({
  name: 'host',
  defaults: {
    context: {
      language: 'en'
    },
    apps: {}
  }
})
export class ApplicationState {...}

在子应用程序中，我希望能够发送动作以及切分此状态，例如：

constructor(private store: Store) {
   // slice the context
   this.context$ = this.store.select(state => state.host.context);
   // slice this sub-app state
   this.state$ = this.store.select(state => state.host.apps['myapp']);
}

...

// dispatch an action
this.store.dispatch(new UpdateContext());

问题：如何将商店从主机应用传递到子应用？我猜可能有一种方法可以在导入过程中使用模块的.forRoot()或.forFeature()函数来实现。但是我完全迷失了。

Answer 1

您也许可以使用store.snapshot()和store.reset()方法来做到这一点。

让我们假设您的状态模型在所有应用程序中都匹配...您的主应用程序拥有一个有效的存储->主应用程序调用{{1}}，序列化快照对象并将其传播到您的子应用程序（使用websockets），长时间轮询或您拥有什么）->您的子应用程序在收到序列化快照后，对其进行反序列化并调用store.snapshot()，以传递快照对象。

但是，这不能确保存储将同步。在子应用程序中修改状态只会在此修改状态。您可以反转快照过程以将状态传播回来。如您所见，这很快就会变得混乱...

更好的方法是使用某种前端到后端事件机制将store.reset()操作分派传播给预订该事件的客户端。例如，对于.NET，可以使用NGXS（https://dotnet.microsoft.com/apps/aspnet/real-time）。其他堆栈也有其他实现。

希望这会有所帮助：-）

是否可以在单独的Angular（子）项目之间共享NGXS存储？

1 个答案: