Question

我正在构建一个登录功能，我希望app.component模板中的某些按钮在用户登录后立即显示。我正在尝试为此使用BehaviorSubject。我为模板中的按钮使用了*ngIf，条件是一个名为loggedIn的变量。但是，当我尝试使用SubjectBehavior订阅的结果初始化loggingIn变量时，出现错误：

ERROR in app.component.ts(10,3): error TS2322: Type 'Observable<boolean>' is not assignable to type 'boolean'.

我不知道是什么原因造成的，因为我返回的是布尔值，而不是可观察值。这是app.component的代码：

export class AppComponent {
  private loggedIn: boolean = this.loginService.isLoggedIn().pipe(
    map((isLoggedIn: boolean) => {         // {3}
      if (!isLoggedIn){
        return false;
      }
      return true;
    }));

  constructor(private loginService: LoginService){}

  logout():void{
    this.loginService.logout();
  }

}

，这里是loginService的相关代码：

   isLoggedIn():BehaviorSubject<boolean>{
    return this.loggedIn; 
  }

  login(username: string, password: string): Observable<boolean> {
    return this.http.post(this.authUrl, JSON.stringify({username: username, password: password}), {headers: this.headers}).map((response: Response) => {
            // login successful if there's a jwt token in the response
            let token: any = response.json().token;
            if (token) {
                // store username and jwt token in local storage to keep user logged in between page refreshes
                localStorage.setItem('currentUser', JSON.stringify({ username: username, token: token }));
                this.loggedIn.next(true);
                // return true to indicate successful login
                return true;
            } else {
                // return false to indicate failed login
                return false;
            }
        }).catch((error:any) => Observable.throw(error.json().error || 'Server error'));
}

Answer 1

由于您使用的是行为主题，因此不必调用agian函数，可以按如下所示直接使用主题，

 login() {
    this.loginService.login(this.user.name,this.user.password).subscribe(
      (response) => {
        this.loginService.loggedIn.next(true);
        this.router.navigate(['/home']);
      }, (error) => {
        this.loginService.loggedIn.next(false);
        if (error.status == 400) {
          this.showErrorAlert();
        } else {
          console.log(error);
        }
      });
  }

Answer 2

正确的答案是我应该使用subscribe方法而不是像这样的管道：

  constructor(private loginService: LoginService){
    this.loginService.isLoggedIn().subscribe((isLoggedIn: boolean) =>
    {
      if (!isLoggedIn){
        this.loggedIn = false;
      }
      this.loggedIn = true;
    })

如何将全局变量订阅到BehaviorSubject？

2 个答案: