为什么要在 app.module.ts 中导入 { HttpClientModule }答案

【问题标题】：Why to import { HttpClientModule } in app.module.ts为什么要在 app.module.ts 中导入 { HttpClientModule }
【发布时间】：2018-12-23 04:30:26
【问题描述】：

我一直致力于创建一个服务来发出 http 请求，因此我使用的是 Angular 提供的 HttpClientModule。我有 data.serivce.ts 文件，其中声明了服务，我正在导入 HttpClient，如下所示。

import { Injectable } from '@angular/core';
import { HttpClient} from '@angular/common/http'

@Injectable()
export class DataService {

  constructor(private http:HttpClient) { 

  }

  validateLogin(){
    return this.http.get('https://someurl')
  }
}

由于我是在 app.module.ts 的 providers 数组中注入 DataService 的依赖，所以我不明白为什么我需要在 app.module.ts 中再次导入 HttpClientModule

【问题讨论】：

将HttpClientModule 导入主模块后，您可以将 HttpClient` 注入到您的服务等应用程序类中

标签： javascript angular angular6

【解决方案1】：

您应该研究 Angular 模块的工作原理。您的 app.module.ts 包含作为根模块的 AppModule。每个应用程序至少有一个模块，即根模块。如果您在 AppModule 中导入任何模块，则应用程序的每个组件都可以访问其（导入的模块）组件。

这就是让 HttpClient 在应用程序中“无处不在”的原因：

在 AppModule 中导入 HttpClientModule。现在您可以在自己的服务或组件中使用 HttpClientModule 中定义的服务、组件等。

【讨论】：

【解决方案2】：

关于你在这一行使用的变量类型信息

constructor(private http:HttpClient)

如果没有该导入，则会出现错误，因为该类型是未知的。

【讨论】：

我明白为什么要在我的服务（data.service.ts）中导入它。但仍然不确定为什么 app.module.ts 文件中应该再次出现相同的导入。

【解决方案3】：

在 Angular 文档中，它说 HttpClientModule，“为 HttpClient 配置依赖注入器，并为 XSRF 提供支持服务。”所以看起来这就是为什么它是使用 HttpClient 的先决条件。

【讨论】：