Angular9 准备工作

要想使用 HttpClient，就要先导入 Angular 的 HttpClientModule。大多数应用都会在根模块 AppModule 中导入它。

Path："app/app.module.ts (excerpt)" 。

import { NgModule }         from '@angular/core';
import { BrowserModule }    from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';


@NgModule({
  imports: [
    BrowserModule,
    // import HttpClientModule after BrowserModule.
    HttpClientModule,
  ],
  declarations: [
    AppComponent,
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

然后，你可以把 HttpClient 服务注入成一个应用类的依赖项，如下面的 ConfigService 例子所示。

Path："app/config/config.service.ts (excerpt)" 。

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


@Injectable()
export class ConfigService {
  constructor(private http: HttpClient) { }
}

HttpClient 服务为所有工作都使用了可观察对象。你必须导入示例代码片段中出现的 RxJS 可观察对象和操作符。比如 ConfigService 中的这些导入就很典型。

Path："app/config/config.service.ts (RxJS imports)" 。

import { Observable, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';

注：

• 该实例应用不需要数据服务器。它依赖于 Angular in-memory-web-api，它替代了 HttpClient 模块中的 HttpBackend。这个替代服务会模拟 REST 式的后端的行为。