Angular 4+ httpClient 使用服务的最佳实践答案

【问题标题】：Angular 4+ httpClient best practice to use serviceAngular 4+ httpClient 使用服务的最佳实践
【发布时间】：2018-02-07 21:32:39
【问题描述】：

您好，我想知道如何组织我的代码：

我有一个简单的用户界面：

export interface User {
Account: string;
Name: string;
EMail: string;
PictureURL: string;
Department: string;
JobTitle: string;
Initials: string;
Skype: string;
Office: string;
MobileNumber: string;
DirectLine: string;
IsChecked: boolean;
IsIDTitleOnly: boolean;
ID: string;
CreatedAt: string;
CreatedBy: this;
ModifiedAt: string;
ModifiedBy: this;}

我有一个简单的服务来获取我的数据：

  getCurrentUser(): Observable<User> {
const serviceUrl: string = environment.apiUrl + 'Users/Current';

return this.http.get(serviceUrl)
.map((res: User) => {
  return res;
});}

最后是一个简单的组件：

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { User } from '../../interfaces/user';
import { UserService } from '../../services/user.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class HomeComponent implements OnInit {
  user: User;


  constructor(
    private userService: UserService
  ) { }

  ngOnInit() {
    this.getCurrentUser()
  }

  getCurrentUser() {
    this
      .userService
      .getCurrentUser()
      .subscribe(
     res => { console.log(res); this.user = res },
     err => { console.log(err); }
  )
  }
}

我没有为我的用户创建一个类或构造函数，我应该总是创建一个足够的类或接口吗？

当我显示“user.Name”时出现错误：“无法读取未定义的属性 'Name'”，因为用户没有时间恢复数据。

我真的很想知道如何正确初始化我的用户，以及是否需要一个类（如果有一天我必须创建一个新用户）。

在此先感谢

【问题讨论】：

Angular's new http client error Cannot read property 'data' of undefined的可能重复

标签： angular angular-services angular-http

【解决方案1】：

最好有一个描述对象的接口或类（形状）。这是 Typescript 为我们提供的主要功能之一，以使我们的代码在其级别上严格类型化。

undefined error 怎么样，您可以在标记中显示时检查您的字段。只需在字段后添加? 标记 - user?.Name。

【讨论】：

您好，感谢您的快速回复，我使用“？”但我无法想象把“？”一切都结束了......我借此机会扩展我的问题，如果我在组件 X (/home) 中：我得到我的数据并转到组件 Y (/tmp) （做其他事情）。当我每次需要检索我的数据时回到 X 时？我一直在做“this.getCurrentUser()”？
是的，你需要。因为每次您离开组件并再次出现时，它都会删除并再次创建它。您可以使用高级别的单例服务来获取并保存用户数据。注入组件后，只需获取保存的数据

【解决方案2】：

在您的 html 中使用 *ngIf，如下所示：

<div *ngIf='user'> {{user.Name}}</div>

这将防止“无法读取未定义的属性'名称'”错误

【讨论】：