我希望有一种有效的方法来存储(更新)前端中的当前用户细节,而不是在加载新组件时向后端创建新的HTTP GET请求。
我添加了一个userservice类,它在调用类中的方法时设置/更新currentuser对象。
import { Http, Response } from '@angular/http';
import { Injectable } from '@angular/core';
@Injectable()
export class UserService {
public currentUser: any;
constructor(private http: Http) { }
updateCurrentUser() {
this.http.get('api/login/currentUser').subscribe(data => {
this.currentUser = data;
});
}
}
我发现这种方法会导致种族问题。例如,如果配置文件组件中请求了
currentUser.username
,但服务类尚未完成请求,则会发生错误。我也试过检查
currentUser
是否未定义,然后调用updateCurrentUser()
,但似乎不起作用。if(this.userService.currentUser === undefined){
this.userService.updateCurrentUser();
}
更新:浏览器控制台中显示的错误消息
使用的HTML更新:
我使用数据绑定来显示用户名(直接从userservice类调用它)。例如。
<span class="username-block">{{userService.currentUser.username}}</span>
我还尝试将CurrnUsor对象分配给试图显示用户名的组件中的变量,但它具有相同的结果。
如有任何帮助/反馈,我将不胜感激。
最佳答案
您可以在HTML中尝试埃尔维斯/生存算子(我想这是正确的名称)。当前用户的问号表示,如果当前用户未定义,请不要费心尝试评估用户名。
假设您的异步代码最终将填充它,那么页面将显示它。
<span class="username-block">{{userService.currentUser?.username}}</span>
编辑
我刚刚注意到您正在输出userservice.currentuser.username。您可能希望将服务中的可观测数据返回到组件,以便数据是被动的。
有点像,
updateCurrentUser() {
return this.http.get('api/login/currentUser')
.catch(error => this.handleError(error, 'currentUser'));
}
然后在组件中,
private currentUser;
ngOnInit() {
this.userService.updateCurrentUser()
.take(1)
.subscribe(data => { this.currentUser = data });
}
html现在引用本地组件副本,最初未定义,但最终由订阅填充。注意,
take(1)
是关闭订阅并避免内存泄漏。 <span class="username-block">{{currentUser?.username}}</span>
编辑第2页
抱歉,您的问题是如何避免多个http调用。
在这种情况下,服务代码应该是
export class UserService {
private currentUser: any; // private because only want to access through getCurrentUser()
constructor(private http: Http) { }
getCurrentUser() {
return this.currentUser
? Observable.of(this.currentUser) // wrap cached value for consistent return value
: this.http.get('api/login/currentUser')
.do(data => { this.currentUser = data }) // cache it for next call
.catch(error => this.handleError(error, 'currentUser'));
}