angular - 登录时角度导航栏发生变化
问题描述
我的 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()
}
}
当用户登录时,导航栏应显示“注销用户名”。我已经成功实现了一个登录服务来做到这一点:
@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公开。
<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">
但它不起作用。请帮忙!
解决方案
它不起作用,因为它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">
推荐阅读
- vue.js - nuxtjs/google-tag-manager 仅在获得 cookie 同意后才添加谷歌分析
- mysql - mysql特征缩放计算
- spring-boot - Artemis 集群 - 使用多个接受器进行负载平衡
- selenium - Robot Framework:重新运行失败的测试用例
- android - 如何检查缓存是否可用于android WebView?
- react-native - 自动缩放到当前位置不适用于特定区域
- c++ - 为什么 GRPC AsyncClient 在等待完成队列中的 Next 结果时会抛出 Segfault
- svelte - UnhandledPromiseRejectionWarning:Windows 中未处理的承诺拒绝错误,但相同的代码在 Svelte 的 Linux 中运行
- css - Chrome 控制台抽屉中的“更改”选项卡中没有 CSS 更改
- android - Android报警管理器同时设置多个问题