Как мне подписать глобальную переменную на BehaviorSubject?

Question

Я создаю функцию входа в систему и хочу, чтобы определенные кнопки в шаблоне app.component появлялись в тот момент, когда пользователь вошел в систему. Я пытаюсь использовать для этого BehaviorSubject. Я использую *ngIf для кнопок в шаблоне и условием является переменная с именем loggedIn. Однако, когда я пытаюсь инициализировать переменную loggedIn результатом подписки SubjectBehavior, я получаю сообщение об ошибке:

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

}

и вот соответствующий код входа в систему:

   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

Правильный ответ: я должен использовать метод подписки вместо канала, например:

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

Answer 2

Поскольку вы используете тему поведения, вам не нужно вызывать функцию 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);
        }
      });
  }