Angular 登录后导航栏发生变化

Question

我的 App 组件中有一个导航栏：

app.component.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()    
  }    

}

用户登录后，导航栏应显示 'logout username'。我已经成功实现了登录服务：

@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">

或使用getter喜欢

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

和

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

Angular 登录后导航栏发生变化

Angular Navbar change when Logged in

authentication

angular

angular-observable

rxjs-observables