使用 ngrx 和选择器等待资源加载到守卫中

Question

TLDR：我有一个isLoading选择器，我想在我的警卫中使用它来仅在此选择器为 false 时激活路由。

这是减速器：

export const initialState: State = {
  loaded: false,
  loading: false,
  success: {
    [...]
  }
};


export const reducer = createReducer(
  initialState,

  on(
    fromApiActions.loadRequest,
    (state): State => ({
      ...state,
      loading: true
    })
  ),

  on(
    fromApiActions.loadRequestSuccess
    (state, partialState): State => ({
      ...state,
      loaded: true,
      loading: false,
      success: {
        ...state.success,
        ...partialState
      }
    })
  ),

  on(
    fromApiActions.loadRequestFail,
    (state): State => ({
      ...state,
      loaded: false,
      loading: false
    })
  )
);

我有一个选择器，可以从状态中选择loading 。 在引导应用程序时，我正在调度LoadRequest操作，该操作将loading变为 true。

这是我的守卫：

export class CanActivateChildrenGuard implements CanActivateChild {
  constructor(private store: Store<fromDataUserInformations.State>) {}

  canActivateChild(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {

    return this.store.pipe(
      select(fromDataUserInformations.isLoading),
      // what to use here?
    );

  }

}

我无法让守卫等待LoadRequestSuccess执行（这是在LoadRequest效果中），以便将loading变为false这样我就可以返回类似!loading东西，我猜。

谢谢！

Answer 1

return this.store.pipe(
      select(fromDataUserInformations.isLoading),
      skipWhile(flag => !flag),
      skipWhile(flag => flag),
      mapTo(true),
    );

它等待直到fromDataUserInformations.isLoading为真，然后等待fromDataUserInformations.isLoading再次为假，然后用真释放守卫（意味着允许导航）。