如何拒绝路由切换，直到数据存储在 ngrx 中并解决？

Question

我想拒绝用户访问路线，直到我的商店中有数据。我尝试使用解析器，但它仍然转到路线并且我收到错误，因为我在状态效果中使用此数据。我在网上搜索，但我没有看到在数据解析之前将用户保留在解析器中的示例在我的商店中拥有必要的数据之前，我如何 "hold" 用户？

Answer 1

使用 canActivate 或 canLoad 守卫。 Todd Motto 有一篇关于如何做到这一点的文章 Preloading ngrx/store with Route Guards

@Injectable()
export class CoursesGuard implements CanActivate {
  constructor(private store: Store<CoursesState>) {}

  getFromStoreOrAPI(): Observable<any> {
    return this.store
      .select(getCoursesState)
      .do((data: any) => {
        if (!data.courses.length) {
          this.store.dispatch(new Courses.CoursesGet());
        }
      })
      .filter((data: any) => data.courses.length)
      .take(1);
  }

  canActivate(): Observable<boolean> {
    return this.getFromStoreOrAPI()
      .switchMap(() => of(true))
      .catch(() => of(false));
  }

如何拒绝路由切换，直到数据存储在 ngrx 中并解决？

how to deny the route to switch until has data in store with ngrx and resolve?

ngrx

angular7

ngrx-store

angular-resolver