Angular 单击更改按钮图标

我正在尝试在登录/注销时更改图标和按钮的功能。我编写了以下代码：

navbar.component.ts

navbar.component.html

---

单击其中一个按钮后，导航栏中的图标/功能不会更改，用户在单击时登录/注销，刷新后加载正确的图标。如何在不重新加载页面的情况下实现这一点？我还尝试将this.loggedIn=this.authService.isLoggedIn；在ngInit方法中

注销后单击时，必须重新分配变量。这会改变你的按钮

this.loggedIn = this.authService.isLoggedIn(); 

要从LoginComponent更新导航，需要执行组件交互。您需要在两个组件中都注入一个服务

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class CommonServiceService {

  private loginDone= new BehaviorSubject<boolean>();
  loginDoneObservable$ = this.loginDone.asObservable(); 

  constructor() { }

  loginDone(status){
    this.loginDone.next(status);
  }
}

在NavigationComponent中，您需要订阅服务中的observable

this._commonServices.loginDoneObservable$
    .subscribe(
        #Update your login variable here.
    )
}

---

这只适用于注销，登录不会更改图标，可能是因为登录是一个不同的组件，没有loggedIn变量。如何处理这个问题？您需要进行组件交互。试着阅读这里的例子，你们就会明白。

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class CommonServiceService {

  private loginDone= new BehaviorSubject<boolean>();
  loginDoneObservable$ = this.loginDone.asObservable(); 

  constructor() { }

  loginDone(status){
    this.loginDone.next(status);
  }
}

this._commonServices.loginDone(true);

this._commonServices.loginDoneObservable$
    .subscribe(
        #Update your login variable here.
    )
}