帶有 angular-redux/store 的 angular Guard

Question

我在我的項目中使用@angular-redux/store 。 我正在嘗試使用@select()裝飾器創建一個警衛，如下所示：

@select((s: IAppState) => s.user.userInformations.userState) userState$: Observable<number>;

我的 canActivate 方法是這樣的：

canActivate(route, state: RouterStateSnapshot): Observable<boolean> {
    return this.userState$.pipe(map(value => {
      if (value === 0)
        return false;
      return true;
    }));
}

問題是什么？ userState$總是返回默認值。（假設未定義）

到目前為止我嘗試了什么？ 我嘗試像這樣過濾 Observable：

this.userState$.pipe(skipWhile(val => val === undefined)).subscribe(value => {
  console.log('value', value);
});

它工作正常，返回值是我所期望的（在構造函數中）。 但我不能在canActivate方法中使用它。 我不知道在canActivate映射數據的最佳方法是什么。

簡而言之：我正在尋找一種方法來跳過狀態的第一個值（初始值）並在canActivate方法中將其用作Observable<boolean> 。

PS如果我可以配置@angular-redux/store默認跳過 @Select() 裝飾器中的 undefiend/initialed 值會更好。

感謝您的幫助。

Answer 1

我找到了解決方案！

我們可以使用Promise來解決這個問題。 由於Promise不返回Observable ，我們應該使用from from rxjs。 最終的代碼是這樣的：

  @select((s: IAppState) => s.user.userInformations.userState) userState$: Observable<number>;
  userStatePromise = new Promise((resolve, reject) => {
    this.userState$.subscribe(val => {
      if (val !== undefined) {
        resolve(val)
      }
    }, (err) => {
      reject(err)
    })
  })

  canActivate(route, state: RouterStateSnapshot): Observable<boolean> {

    return from(this.userStatePromise).pipe(map(val => {
      if (val === 0) {
        // route anywhere you want
        return false;
      }
      return true;
    }))

  }