无法读取未定义的 Observables Ionic 的属性方向

Question

我正在开发 Ionic 5/angular 应用程序，但我在使用注销功能时遇到了问题。

登出后，显示登录页面，但无法使用输入用户名和密码的输入（不会从键盘输入任何内容）

唯一的线索是跟随有时显示的错误。

组件中的注销方法是：

     login(form){

    this.authService.login(form.value);
    
    this.authService.currentUser.subscribe(
      (data)=>{
        console.log(data);
        if(data) {this.router.navigateByUrl('home')}
          else {
            
            this.router.navigateByUrl('/login')
          }
      },
      (error) => {throw Error(error)}
    );
    
  }

我正在使用 behaviorSubject 来跟踪服务中的登录用户：

 private _currentUser: BehaviorSubject<UserLogueado> = new BehaviorSubject(null);

  currentUser = this._currentUser.asObservable();

  constructor(private hashingService: HashingService, private router: Router, private http: HttpClient) { }

  encriptarContrasenia(contrasenia: string): string {
    
    return this.hashingService.hashearString(contrasenia);
  }

  private setSession(authResult) {
    //const expiresAt = moment().add(authResult.expiresIn,'second');

    localStorage.setItem('auth_token', authResult.token);
    localStorage.setItem('auth_Refresh_token', authResult.refreshToken);
}  

  login(usuarioFromForm) {

    var usuario;
    var dataToken;

    this.http.post<any>(environment.UrlBaseApi +'Authenticate/Login', { username: usuarioFromForm.email, 
      password: this.encriptarContrasenia(usuarioFromForm.password) }, 
      {headers: new HttpHeaders({ 'Content-Type': 'application/json' })})
      .subscribe(
        data => {
          console.log(data)
          dataToken = data
          this.setSession(data)
          this.obtenerDetalleUsuario(usuarioFromForm.email).subscribe(
            data=>{
              usuario = data;
              //this._currentUser = new BehaviorSubject(usuario)
              /* this._currentUser.isStopped = false;
              this._currentUser.closed = false; */
              //this._currentUser.lift()
              this._currentUser.next(usuario);

            }, 
            (error) => {
              throw error
            }
          )
        },
        (error) => {
          throw error
        }
      )
  }

  getUserSubject() {
    return this._currentUser.asObservable();
  }

  isLoggedIn() {
    return !!this._currentUser.value;
  }

  obtenerDetalleUsuario(usuario: string): Observable<any>{

    return this.http.get<any>(environment.UrlBaseApi + `Authenticate/user/${usuario}`);
 
  }

  logout() {

      localStorage.removeItem('auth_token')
      localStorage.removeItem('auth_Refresh_token')
      
      this.router.navigate(['/login'])

      this._currentUser.next(null);
  }

当前用户用于在 appComponent 中显示手册和标题。

有什么建议吗？

编辑：

尝试不同的事情后，我注意到如果我在注销方法中注释以下行：

this._currentUser.next(null);

应用程序导航到登录页面并输入工作。但由于菜单和标题取决于主题，因此会显示出来。

关于如何修复主题的任何建议？

Answer 1

您是否在组件被销毁时退订this.authService.currentUser？

组件代码：

destroyed$ = new Subject();

this.authService.currentUser.pipe(
   takeUntil(this.destroyed$)
).subscribe(...)

ngOnDestroy() {
   this.destroyed$.next();
   this.destroyed$.complete();
}

Answer 2

由于currentUser 是一个Observable，它应该与AsyncPipe 一起使用，以便订阅它并接收其内部值，如下所示：

<app-menu *ngIf="currentUser | async">