我会尽量保持简洁和简洁 .
我们正在使用Angular 4.通常,解决方案是在以前的版本中添加观察者,但这些不再存在,因此需要一些关于实现可能是简单问题的解决方案的真实世界知识 .
我们的main.ts文件中有3个组件
<header_component></header_component>
<router_outlet></router_outlet>
<footer_component></footer_component>
因此,在登录和注销时刷新视图(组件)时遇到问题 .
在“登录”时,使用单独的router_outlet,并且在成功登录时,我们导航到用户表,这会导致init重新加载用户 . 但是,由于这只是更改router_outlet,因此标头不会刷新以显示现在的“注销”和“重置密码”选项 . 因此,解决方案需要触发heads_component和router_outlet的刷新 .
第二个问题是,在“注销”时,这是在header_component中完成的,因此 Headers 中的选项变为“login”和“Forgot Password” . 这次的问题是router_outlet没有刷新以删除登录所带来的其他功能(编辑,删除,添加)用户 .
我查看了Angular.io,文档并没有真正涵盖我们正在使用的设置 . 当然,这可能只是我对它的解释 .
任何想法都表示赞赏 .
提前谢谢了
刘易斯
更新:好的,所以我在这方面取得了一些进展,但是我已经达到了一个死胡同
我已经实现了可观察的概念
headerComponent有 constructor(private _loginService: LoginService, private _authService: AuthService) { this.isLoggedIn = _loginService.getLoggedInStatus.subscribe((loggedIn: boolean) => this.changeLoggedInStatus(loggedIn)); }
usercomponent也有很多相同的东西
loginService具有`export class LoginService {@Output()getLoggedInStatus:EventEmitter = new EventEmitter();
isLoggedIn(): Observable<boolean> {
var currentUser = JSON.parse(localStorage.getItem('currentUser'));
if (currentUser) {
this.getLoggedInStatus.emit(true);
return (true) as any;
} else {
this.getLoggedInStatus.emit(false);
return (false) as any;
}
}
注销时,我会触发 this.getLoggedInStatus.emit(false)
但用户组件未收到此消息
有任何想法吗?
1 回答
使用将返回用户状态的服务i:e用户是否登录 .
然后在头部组件中,您可以调用此服务来检查用户状态并根据响应设置标志
在您的html文件中使用此标志显示基于userflag i的所需标签:e如果userFlag为true(用户登录)则
您也可以试试Angular Obsevables