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

【问题标题】：How to compose Angular guard based on NgRX store data如何基于 NgRX 存储数据组成 Angular 守卫
【发布时间】：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']))
    );
  }

【问题讨论】：

标签： angular rxjs ngrx

【解决方案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']))
    );
  }

【讨论】：