angular 守卫 angular-redux/store

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$ 始终是 return 的默认值。（假设未定义）

到目前为止我尝试了什么？ 我试着像这样过滤 Observable：

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

它工作正常并且 return 值是我所期望的（在构造函数中）。但我不能在 canActivate 方法中使用它。我不知道在 canActivate.

中映射数据的最佳方式是什么

简要说明：我正在寻找一种方法来跳过状态的第一个值（初始值）并在 canActivate 方法中将其用作 Observable<boolean>。

P.S. 如果我能配置 @angular-redux/store 跳过 [=52 就更好了=] 默认值在@Select() 装饰器中。

感谢您的帮助。

Answer 1

我找到了解决方案！

我们可以使用 Promise 来解决这个问题。由于 Promise 没有 return Observable，我们应该使用 rxjs 中的 from。最终代码是这样的：

  @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;
    }))

  }

angular 守卫 angular-redux/store

angular guard with angular-redux/store

angular

redux

redux-observable

angular-router-guards

angular-redux