使用 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再次為假，然后用真釋放守衛（意味着允許導航）。