Блог

У меня есть панель навигации в компоненте приложения:

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 amp;amp; _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>
 

приложение.компонент.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:''})
    }      
   
}
 

Но, как вы можете видеть, я предоставляю свой сервис входа в систему как общедоступный в своем компоненте приложения.

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

Я попытался сделать:

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

а затем используйте getUser в app.component.html:

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

но это не работает. Пожалуйста, помогите!

Это не работает, потому getUser что это функция, вам нужно вызвать ее как :

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

Или используйте геттер, например

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

и

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