登錄時的角度導航欄更改

Question

我的 App 組件中有一個導航欄：

應用程序組件.html

<div class="collapse navbar-collapse" id="navbarSupportedContent">
  <ul class="navbar-nav me-auto mb-2 mb-lg-0">
    <li class="nav-item">          
      <div *ngIf="_loginService.user.name.length > 0 && _loginService.user.id.length > 0 ; else elseBlock">
        <a class="nav-link" (click)="logout()">Logout {{ _loginService.user.name }}</a> 
      </div>
      <ng-template #elseBlock>
        <a class="nav-link" routerLink="login">Login</a>            
      </ng-template>                                          
  </ul>
</div>

app.component.ts

export class AppComponent implements OnInit {
  user: User = {
    name: '',
    id: ''
  };
  
  constructor(public _loginService: LoginService){
  }

  ngOnInit(): void {    
  }

  getUser(): User{
    return this._loginService.user;
  }

  logout(){
    this._loginService.logout()    
  }    

}

當用戶登錄時，導航欄應顯示“注銷用戶名”。 我已經成功地實現了一個登錄服務來這樣做：

@Injectable()
export class LoginService{

    user: User = {
      name:'',
      id:''
    };

    userChange: Subject<User> = new Subject<User>();

    constructor(){
      this.userChange.subscribe(value =>{
        console.log("userChange.subscribe",value)
        this.user = value
      })
    }
  
    login(name = "",id = ""){      
      this.userChange.next({name: name, id: id})
    }
  
    logout(){
      this.userChange.next({name:'',id:''})
    }      
   
}

但是正如您所看到的，我在我的 App 組件中將我的loginService公開為public 。

<div *ngIf="_loginService.user.name.length > 0 && _loginService.user.id.length > 0 ; else elseBlock">

我試圖做一個：

  getUser(): User{
    return this._loginService.user;
  }

然后在 app.component.html 中使用 getUser：

<div *ngIf="getUser.name.length > 0 && getUser.id.length > 0 ; else elseBlock">

但它不起作用。 請幫忙！

Answer 1

它不起作用，因為getUser是一個函數，您需要像這樣調用它：

<div *ngIf="getUser().name.length > 0 && getUser().id.length > 0 ; else elseBlock">

---

或者使用吸氣劑

get userInfo(): User{
  return this._loginService.user;
}

和

<div *ngIf="userInfo.name.length > 0 && userInfo.id.length > 0 ; else elseBlock">