我希望有一种有效的方法来存储(更新)前端中的当前用户细节,而不是在加载新组件时向后端创建新的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();
}

更新:浏览器控制台中显示的错误消息
angular - Angular 2/4-在前端存储当前用户对象详细信息(而不是向后端发出连续的HTTP请求)-LMLPHP
使用的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'));
  }

08-05 03:00
查看更多