[英]Angular Navbar change when Logged in
I have a navbar in my App component:我的 App 组件中有一个导航栏:
app.component.html应用程序组件.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 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()
}
}
When user is logged in, the navbar should display 'logout username'.当用户登录时,导航栏应显示“注销用户名”。 I have successfully implemented a login service to do so:
我已经成功地实现了一个登录服务来这样做:
@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:''})
}
}
But as you can see, I am exposing my loginService as public in my App component.但是正如您所看到的,我在我的 App 组件中将我的loginService公开为public 。
<div *ngIf="_loginService.user.name.length > 0 && _loginService.user.id.length > 0 ; else elseBlock">
I tried to do a:我试图做一个:
getUser(): User{
return this._loginService.user;
}
and then use getUser in app.component.html:然后在 app.component.html 中使用 getUser:
<div *ngIf="getUser.name.length > 0 && getUser.id.length > 0 ; else elseBlock">
but it doesn't work.但它不起作用。 Please help!
请帮忙!
It's not working because getUser
is a function, you need to call it like :它不起作用,因为
getUser
是一个函数,您需要像这样调用它:
<div *ngIf="getUser().name.length > 0 && getUser().id.length > 0 ; else elseBlock">
Or use getter like或者使用吸气剂
get userInfo(): User{
return this._loginService.user;
}
and和
<div *ngIf="userInfo.name.length > 0 && userInfo.id.length > 0 ; else elseBlock">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.