用的框架是把sidebar写在app.component.html里的,组件初始化会读取localStorage里的用户名来更新侧边栏里的用户名:
ngOnInit(): void {
var user_name = 'User'
if (localStorage.getItem('user_name')){
user_name = localStorage.getItem("user_name") as string
};
this.user_name = user_name;
}
但是只有一开始登进来有效,如果退出换账号登录,重进页面不会调用ngOnInit(){},需要刷新页面才能显示新的用户名。
考虑几个解决方案:
1、生命周期钩子。
页面负担大,而且没仔细研究过ngDoCheck,ngAfterContentChecked,ngAfterViewChecked这几个是咋用的,所以直接忽略。
2、跳转路由时直接刷新页面。
没研究明白,忽略。
3、EventEmitter事件。
其实最先想到的就是这个,但是感觉可能大概没有必要,反而最后才考虑他,在处理上有点奇怪,仅作参考。
在通用service里创建event,类型为string(用户名):
public loginUsernameEvent = new EventEmitter<string>();
在login组件中导入,登录成功后触发该事件:
import ...
import { CommonService } from 'src/app/services/common-service.service';
@Component({...})
export class LoginComponent implements OnDestroy, AfterViewInit {
...
...
constructor(..., public common:CommonService) {}
login() {
... //Login success
this.common.loginUsernameEvent.emit(response_data.user_name)
}
}
最后在侧边栏中监听该事件:
import { CommonService } from 'src/app/services/common-service.service';
constructor(
private readonly common: CommonService
) {
this.common.loginUsernameEvent.subscribe(user_name=>{
this.user_name = user_name;
})
}