如何基于 NgRX 存储数据组成 Angular 守卫

Posted 2023-03-16

【中文标题】如何基于 NgRX 存储数据组成 Angular 守卫

【英文标题】：How to compose Angular guard based on NgRX store data

【发布时间】：2019-05-13 18:38:51

【问题描述】：

我正在尝试创建一个守卫来检查路由参数的值是否出现在位置列表（放置在 NgRX 存储中）。

问题是当我过滤位置时，我只从流locations.length 中获得第一个结果，返回 0 并且 Observable 正在关闭。你能以某种方式纠正我吗？位置可能尚未加载。我想等待它们被加载到商店，然后才检查参数。

canActivateChild(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> 
    return this.locationFacade.locations$.pipe(
      filter(locations => !!locations.length),
      map((locations: Array<Location>) => locations.some(x => x.name === next.params['locationName']))
    );
  

【参考方案1】：

我认为更好的解决方案是引入加载状态，而不是检查length。比如：

canActivateChild(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> 
    return this.locationFacade.locations$.pipe(
      filter(locations => locations.state === 'LOADED'),
      map((locations: Array<Location>) => locations.some(x => x.name === next.params['locationName']))
    );