NGRX/Data angular route guard - 帮助等待数据加载答案

【问题标题】：NGRX/Data angular route guard - help waiting for data to loadNGRX/Data angular route guard - 帮助等待数据加载
【发布时间】：2021-04-15 23:56:50
【问题描述】：

Angular 10，NGRX/数据 10

我设置了一个路由守卫，目的是在访问页面之前加载我的所有数据。我首先检查存储中的令牌，如果没有令牌 - 然后重定向。如果有token，检查是否加载了用户数据（四个dataService调用需要用户信息加载）。我想等到所有四个 dataService 调用都完成后才允许警卫变为 true。

我正在为 Observables 以及如何等待它们解决而苦苦挣扎。这是我在路由守卫中的内容。

userLoaded$ = this.store.pipe(select(fromState.getLoaded));

canActivate(): Observable<boolean> | boolean {

    if (!this.authService.getToken()) {
      this.router.navigateByUrl('/login');
      return false;
    } else {
      return this.userLoaded$.pipe(
          tap(userLoaded => {
            if (!userLoaded) {
              this.store.dispatch(new GetUser({id: Number(this.authService.getUserId())}));
            }
          }),
          filter(userLoaded => !!userLoaded),
          tap( () => {
              this.typeDataService.getAll();
              this.groupDataService.getAll();
              this.routeDataService.getAll();
              this.officeDataService.getAll();
          })
      );
    }
  }

我真的对可观察对象、管道和订阅没有很好的掌握。

如何设置代码以在所有 dataService 调用都加载数据后返回可观察对象？

【问题讨论】：

标签： ngrx rxjs-observables

【解决方案1】：

尝试使用forkJoin

也可以搜索其他运营商others operators

【讨论】：