Angular 11 等到订阅完成获取数据

Question

我有一个 auth.service 和 data.service。 auth.service 从 data.service 获取数据，但它会在数据到达之前进行检查。所以它返回 undefined。

auth.service 获取这样的数据；

get isLoggedIn(): boolean {
  const user = JSON.parse(localStorage.getItem('user'));
  const emailVerify = this.dataservice.userStatService(user.uid);
  console.warn(emailVerify)
  return (user !== null && emailVerify !== false && emailVerify !== undefined ) ? true : false;
}

data.service检查用户状态函数是这样的；

  userStatService(uid: any): any{
    console.error(uid)
    this.get(uid)
      .subscribe(
        data => {
          console.warn('status set', data.status)
          this.statData =  data.status;
        },
        error => {
          console.log(error);
    });
    return this.statData;
  }

这段代码现在是这样工作的； See console logs

我正在等待您的代码示例，谢谢。

更新： auth.guard 代码；

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    if (this.authService.isLoggedIn() !== true) {
      this.router.navigate(['/auth/login'], { queryParams: { returnUrl: 'dashboard' } })
      .then(() => {
        this.authService.SignOut();
      });
    }else{
    return true;
    }
  }

Answer 1

observables是异步执行的，需要在consumer中返回observable并订阅才能正确使用：

 // return observable
 userStatService(uid: any): any{
    console.error(uid)
    return this.get(uid)
 }


isLoggedIn() {
  const user = JSON.parse(localStorage.getItem('user'));
  this.dataservice.userStatService(user.uid).subscribe(emailVerify => {
    console.warn(emailVerify)
  })
  // really can't do this while working with async execution. doesn't work.
  //return (user !== null && emailVerify !== false && emailVerify !== undefined ) ? true : false;
}

如果这是用于守卫，请使用 map 运算符并返回整个 observable，angular 需要一个布尔值或一个 observable：

isLoggedIn(): Observable<boolean> {
  const user = JSON.parse(localStorage.getItem('user'));
  if (!user)
    return of(false); // null guard and slight performance improvement
  return this.dataservice.userStatService(user.uid).pipe(map(emailVerify => {
    console.warn(emailVerify)
    return (emailVerify !== false && emailVerify !== undefined ) ? true : false;
  }))
}

在你的保护下，你需要再次返回 OBSERVABLE：

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return this.authService.isLoggedIn().pipe(
      map(isLoggedIn => {
        if (!isLoggedIn) {
          this.router.navigate(['/auth/login'], { queryParams: { returnUrl: 'dashboard' } }).then(() => {
            this.authService.SignOut();
          });
        }
        return isLoggedIn;
      })
    )
  }

angular guards 将处理订阅，但你必须将 observable 返回给守卫。