角度集管组件在路由加载后重新加载

Question

用户成功登录系统后，我需要刷新标头组件。 因为我需要检查用户令牌是否为空。我在 ngOninit(( 函数中调用了该函数。请检查我下面的标题组件代码

export class HeaderComponent implements OnInit {
newUserMenu = true;
loginUserMenu = false;
constructor(private authService: AuthService, private routers: Router) {}
ngOnInit() {
this.isTokenAvailabe();
}
logout() {
localStorage.clear();
this.routers.navigate(['/login']);
}
isTokenAvailabe() {
console.log(this.authService.getJWTToken() );
if (this.authService.getJWTToken() === null) {
this.newUserMenu = true;
} else {
this.newUserMenu = false;
this.loginUserMenu = true;
} 
}
}

我的问题是，isTokenAvailabe(( 函数没有更新。 因为该标头组件不会重新加载或刷新。Therfore ngOnInit(( 函数不加载。如何更新？

Answer 1

您可以使用BehaviourSubjectObservable来实现此目的。这允许您将最新值推送到另一个组件，并且在另一个组件中，您将订阅(侦听更改(以更新值。

在你的service.ts你可以这样做

import { BehaviorSubject } from 'rxjs';
private messageSource = new BehaviorSubject('default message');
public currentMessageSubscriber = this.messageSource.asObservable();

notify(message: any) {
this.messageSource.next(message)
}

在你的login.component.ts你可以像这样loginapi回应中打电话给notify()

this.dataService.login(loginObject).subscribe(res=>{
this.dataService.notify({isRefresh : true});
})

最后，在您的header.component.ts中，您可以订阅以获取ngOnInit更新，例如

ngOnInit() {
this.__dataService.currentMessageSubscriber.subscribe((data : any)=>{
if(data.isRefresh ){
this.isTokenAvailabe();
}
}) 
}

这样，当您收到login响应时，您将立即通知另一个组件，嘿检查令牌。在您的header.component.ts中，您可以订阅以获取立即更新的消息。