跨所有 Angular 通用组件分发数据的最佳实践？

Question

我有一个相当大的 Angular SPA，带有路由器插座和不同级别的组件。
目前，我的应用程序支持不同的区域，其中每个区域都是一个单独的路由，并附有相关数据：

{
    path: 'Saint-Petersburg', canActivate: [MetaGuard],
    loadChildren: () => import('./components/main-page/main-page.module').then(m => m.MainPageModule),
    data: { region: regions[1] }
 }

区域的更改是通过路由数据和本地存储完成的所以，当用户更改区域时，Angular app:
1）从路由中获取区域数据（这里data: { region: regions[1] }）
2) 更新本地存储中的区域值
3) 重新加载应用程序 (window.reload)
4）所有组件从本地存储中检查区域并提供相关数据。

该解决方案工作正常但容易出错，因为：
1) 我需要始终从 localstorage
读取一个区域 2) 路由中提供的数据只能与路由中指定的模块共享
3) 本地存储不 Angular 通用友好

您能否建议存储区域或跨所有组件访问区域的最佳解决方案？
我需要使用带有主题的服务吗？
或者使用类似于 Redux 的 RxJS？

请帮忙

Answer 1

如果您只需要存储区域状态，您可以为此使用单例服务

   @Injectable({
  providedIn:"root"
})
export class RegionStore{
    private _region$ = new BehaviourSubject<string>();

    public region$(){
      return this._region$.asObservable();
    }

    public region(){
      return this._region$.getValue();
    }

    changeRegion(region:string){
      this._region$.next(region);
    }

}

但是如果你想拥有整个应用程序状态，那么你可以使用 NGRX NGXS Akita

跨所有 Angular 通用组件分发数据的最佳实践？

The best practice of distribution data across all Angular Universal components?

data-sharing

rxjs

angular