跨所有 Angular Universal 组件分布数据的最佳实践?

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(我需要始终从本地存储中读取区域2(路由中提供的数据只能与路由
中指定的模块共享3(本地存储
不是Angular Universal 友好的

您能否建议存储区域或跨所有组件访问区域的最佳解决方案？
我需要使用主题服务吗？
或者使用类似于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秋田