Angular 服务

客官°小女子只卖身不卖艺 2022-01-16 19:15 192阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

英雄指南的 `HeroesComponent` 目前获取和显示的都是模拟数据。

本节课的重构完成之后，`HeroesComponent` 变得更精简，并且聚焦于为它的视图提供支持。这也让它更容易使用模拟服务进行单元测试。

如果你希望从 GitHub 上查看我们提供测试的源代码，你可以访问下面的链接：[https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-services][https_github.com_cwiki-us-angular_cwiki-us-angular-tour-of-hero-services]

## 为什么需要服务 ##

组件不应该直接获取或保存数据，它们不应该了解是否在展示假数据。 它们应该聚焦于展示数据，而把数据访问的职责委托给某个服务。

本节课，你将创建一个 `HeroService`，应用中的所有类都可以使用它来获取英雄列表。 不要使用 `new` 来创建此服务，而要依靠 Angular 的[*依赖注入*][Link 1]机制把它注入到 `HeroesComponent` 的构造函数中。

服务是在多个“互相不知道”的类之间共享信息的好办法。 你将创建一个 `MessageService`，并且把它注入到两个地方：

1.  `HeroService` 中，它会使用该服务发送消息。
2.  `MessagesComponent` 中，它会显示其中的消息。

## 创建 `HeroService` ##

使用 Angular CLI 创建一个名叫 `hero` 的服务。

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>ng generate service hero</code></p> </td> 
  </tr> 
 </tbody> 
</table>

该命令会在`src/app/hero.service.ts`中生成`HeroService`类的骨架。`HeroService`类的代码如下：

**src/app/hero.service.ts (new service)**

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>import</code>&nbsp;<code>{ Injectable } from&nbsp;</code><code>'@angular/core'</code><code>;</code></p> <p>&nbsp;</p> <p><code>@Injectable</code><code>({ </code></p> <p><code>&nbsp;&nbsp;</code><code>providedIn:&nbsp;</code><code>'root'</code><code>,</code></p> <p><code>})</code></p> <p><code>export&nbsp;</code><code>class</code>&nbsp;<code>HeroService { </code></p> <p>&nbsp;</p> <p><code>&nbsp;&nbsp;</code><code>constructor() { }</code></p> <p>&nbsp;</p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

### *@Injectable()* 服务 ###

注意，这个新的服务导入了 Angular 的 [Injectable][] 符号，并且给这个服务类添加了 `@`[Injectable][]`()` 装饰器。 它把这个类标记为*依赖注入系统*的参与者之一。`HeroService` 类将会提供一个可注入的服务，并且它还可以拥有自己的待注入的依赖。 目前它还没有依赖，但是[很快就会有了][Link 2]。

`@`[Injectable][]`()` 装饰器会接受该服务的元数据对象，就像 `@`[Component][]`()` 对组件类的作用一样。

### 获取英雄数据 ###

`HeroService` 可以从任何地方获取数据：Web 服务、本地存储（LocalStorage）或一个模拟的数据源。

从组件中移除数据访问逻辑，意味着将来任何时候你都可以改变目前的实现方式，而不用改动任何组件。 这些组件不需要了解该服务的内部实现。

这节课中的实现仍然会提供*模拟的英雄列表*。

导入 `Hero` 和 `HEROES`。

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>import</code>&nbsp;<code>{ Hero } from&nbsp;</code><code>'./hero'</code><code>;</code></p> <p><code>import</code>&nbsp;<code>{ HEROES } from&nbsp;</code><code>'./mock-heroes'</code><code>;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

添加一个 `getHeroes` 方法，让它返回*模拟的英雄列表*。

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>getHeroes(): Hero[] { </code></p> <p><code>&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>HEROES;</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

## 提供（provide） `HeroService` ##

在要求 Angular 把 `HeroService` 注入到 `HeroesComponent` 之前，你必须先把这个服务*提供给依赖注入系统*。[稍后][Link 3]你就要这么做。 你可以通过注册*提供商*来做到这一点。提供商用来创建和交付服务，在这个例子中，它会对 `HeroService` 类进行实例化，以提供该服务。

现在，你需要确保 `HeroService` 已经作为该服务的提供商进行过注册。 你要用一个*注入器*注册它。注入器就是一个对象，负责在需要时选取和注入该提供商。

默认情况下，Angular CLI 命令 `ng generate service` 会通过给 `@`[Injectable][] 装饰器添加元数据的形式，用*根注入器*将你的服务注册成为提供商。

如果你看看 `HeroService` 紧前面的 `@`[Injectable][]`()` 语句定义，就会发现 [providedIn][] 元数据的值是 'root'：

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>@Injectable</code><code>({ </code></p> <p><code>&nbsp;&nbsp;</code><code>providedIn:&nbsp;</code><code>'root'</code><code>,</code></p> <p><code>})</code></p> </td> 
  </tr> 
 </tbody> 
</table>

[Injectable][Injectable 1]

({
      providedIn: 'root',
    })

当你在顶层提供该服务时，Angular 就会为 `HeroService` 创建一个单一的、共享的实例，并把它注入到任何想要它的类上。 在 `@`[Injectable][] 元数据中注册该提供商，还能允许 Angular 通过移除那些完全没有用过的服务来进行优化。

要了解关于提供商的更多知识，参见[提供商部分][Link 4]。 要了解关于注入器的更多知识，参见[依赖注入指南][Link 1]。

现在 `HeroService` 已经准备好插入到 `HeroesComponent` 中了。

这是一个过渡性的代码范例，它将会允许你提供并使用 `HeroService`。此刻的代码和[最终代码][Link 5]相差很大。

## 修改 `HeroesComponent` ##

打开 `HeroesComponent` 类文件。

删除 `HEROES` 的导入语句，因为你以后不会再用它了。 转而导入 `HeroService`。

**src/app/heroes/heroes.component.ts (import HeroService)**

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>import</code>&nbsp;<code>{ HeroService } from&nbsp;</code><code>'../hero.service'</code><code>;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

把 `heroes` 属性的定义改为一句简单的声明。

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>heroes: Hero[];</code></p> </td> 
  </tr> 
 </tbody> 
</table>

### 注入 `HeroService` ###

往构造函数中添加一个私有的 `heroService`，其类型为 `HeroService`。

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>constructor(</code><code>private</code>&nbsp;<code>heroService: HeroService) { }</code></p> </td> 
  </tr> 
 </tbody> 
</table>

这个参数同时做了两件事：1. 声明了一个私有 `heroService` 属性，2. 把它标记为一个 `HeroService` 的注入点。

当 Angular 创建 `HeroesComponent` 时，[依赖注入][Link 1]系统就会把这个 `heroService` 参数设置为 `HeroService` 的单例对象。

### 添加 *getHeroes()* ###

创建一个函数，以从服务中获取这些英雄数据。

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>getHeroes():&nbsp;</code><code>void</code>&nbsp;<code>{ </code></p> <p><code>&nbsp;&nbsp;</code><code>this</code><code>.heroes =&nbsp;</code><code>this</code><code>.heroService.getHeroes();</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

### 在 `ngOnInit` 中调用它 ###

你固然可以在构造函数中调用 `getHeroes()`，但那不是最佳实践。

让构造函数保持简单，只做初始化操作，比如把构造函数的参数赋值给属性。 构造函数不应该*做任何事*。 它当然不应该调用某个函数来向远端服务（比如真实的数据服务）发起 HTTP 请求。

而是选择在 ngOnInit 生命周期钩子中调用 getHeroes()，之后交由 Angular 处理，它会在构造出 HeroesComponent 的实例之后的某个合适的时机调用 ngOnInit。

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>ngOnInit() { </code></p> <p><code>&nbsp;&nbsp;</code><code>this</code><code>.getHeroes();</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

### 查看运行效果 ###

刷新浏览器，该应用仍运行的一如既往。 显示英雄列表，并且当你点击某个英雄的名字时显示出英雄详情视图。

## 可观察（Observable）的数据 ##

`HeroService.getHeroes()` 的函数签名是*同步的*，它所隐含的假设是 `HeroService` 总是能同步获取英雄列表数据。 而 `HeroesComponent` 也同样假设能同步取到 `getHeroes()` 的结果。

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>this</code><code>.heroes =&nbsp;</code><code>this</code><code>.heroService.getHeroes();</code></p> </td> 
  </tr> 
 </tbody> 
</table>

这在真实的应用中几乎是不可能的。 现在能这么做，只是因为目前该服务返回的是*模拟数据*。 不过很快，该应用就要从远端服务器获取英雄数据了，而那天生就是*异步*操作。

`HeroService` 必须等服务器给出响应， 而 `getHeroes()` 不能立即返回英雄数据， 浏览器也不会在该服务等待期间停止响应。

`HeroService.getHeroes()` 必须具有某种形式的*异步函数签名*。

它可以使用回调函数，可以返回 `Promise`（承诺），也可以返回 `Observable`（可观察对象）。

这节课，`HeroService.getHeroes()` 将会返回 `Observable`，因为它最终会使用 Angular 的 `HttpClient.get` 方法来获取英雄数据，而 [`HttpClient.get()` 会返回 `Observable`][HttpClient.get_Observable]。

### 可观察对象版本的 `HeroService` ###

`Observable` 是 [RxJS 库][RxJS]中的一个关键类。

在[稍后的 HTTP 教程][HTTP]中，你就会知道 Angular [HttpClient][] 的方法会返回 RxJS 的 `Observable`。 这节课，你将使用 RxJS 的 `of()` 函数来模拟从服务器返回数据。

打开 `HeroService` 文件，并从 RxJS 中导入 `Observable` 和 `of` 符号。

**src/app/hero.service.ts (Observable imports)**

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>import</code>&nbsp;<code>{ Observable, of } from&nbsp;</code><code>'rxjs'</code><code>;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

把 `getHeroes` 方法改成这样：

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>getHeroes(): Observable&lt;Hero[]&gt; { </code></p> <p><code>&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>of(HEROES);</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

`of(HEROES)`会返回一个`Observable<Hero[]>`，它会发出单个值，这个值就是这些模拟英雄的数组。

在 [HTTP 教程][HTTP]中，你将会调用 `HttpClient.get<Hero[]>()` 它也同样返回一个 `Observable<Hero[]>`，它也会发出单个值，这个值就是来自 HTTP 响应体中的英雄数组。

### 在 `HeroesComponent` 中订阅 ###

`HeroService.getHeroes` 方法之前返回一个 `Hero[]`， 现在它返回的是 `Observable<Hero[]>`。

你必须在 `HeroesComponent` 中也向本服务中的这种形式看齐。

找到 `getHeroes` 方法，并且把它替换为如下代码（和前一个版本对比显示）：

**heroes.component.ts (Observable)**

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>getHeroes():&nbsp;</code><code>void</code>&nbsp;<code>{ </code></p> <p><code>&nbsp;&nbsp;</code><code>this</code><code>.heroService.getHeroes()</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>.subscribe(heroes =&gt;&nbsp;</code><code>this</code><code>.heroes = heroes);</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

**heroes.component.ts (Original)**

`Observable.subscribe()` 是关键的差异点。

上一个版本把英雄的数组赋值给了该组件的 `heroes` 属性。 这种赋值是*同步*的，这里包含的假设是服务器能立即返回英雄数组或者浏览器能在等待服务器响应时冻结界面。

当 `HeroService` 真的向远端服务器发起请求时，这种方式就行不通了。

新的版本等待 `Observable` 发出这个英雄数组，这可能立即发生，也可能会在几分钟之后。 然后，`subscribe` 函数把这个英雄数组传给这个回调函数，该函数把英雄数组赋值给组件的 `heroes`属性。

使用这种异步方式，当 `HeroService` 从远端服务器获取英雄数据时，就*可以工作了*。

## 显示消息 ##

在这一节，你将

*  添加一个 `MessagesComponent`，它在屏幕的底部显示应用中的消息。
 *  创建一个可注入的、全应用级别的 `MessageService`，用于发送要显示的消息。
 *  把 `MessageService` 注入到 `HeroService` 中。
 *  当 `HeroService` 成功获取了英雄数据时显示一条消息。

### 创建 `MessagesComponent` ###

使用 CLI 创建 `MessagesComponent`。

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>ng generate component messages</code></p> </td> 
  </tr> 
 </tbody> 
</table>

CLI 在 `src/app/`[messages][] 中创建了组件文件，并且把 `MessagesComponent` 声明在了 `AppModule` 中。

修改 `AppComponent` 的模板来显示所生成的 `MessagesComponent`：

**/src/app/app.component.html**

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>&lt;h1&gt;{ {title}}&lt;/h1&gt;</code></p> <p><code>&lt;app-heroes&gt;&lt;/app-heroes&gt;</code></p> <p><code>&lt;app-messages&gt;&lt;/app-messages&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

你可以在页面的底部看到来自的 `MessagesComponent` 的默认内容。

### 创建 `MessageService` ###

使用 CLI 在 `src/app` 中创建 `MessageService`。

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>ng generate service message</code></p> </td> 
  </tr> 
 </tbody> 
</table>

打开`MessageService`，并把它的内容改成这样：

**/src/app/message.service.ts**

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>import</code>&nbsp;<code>{ Injectable } from&nbsp;</code><code>'@angular/core'</code><code>;</code></p> <p><code>&nbsp;</code></p> <p><code>@Injectable</code><code>({ </code></p> <p><code>&nbsp;&nbsp;</code><code>providedIn:&nbsp;</code><code>'root'</code><code>,</code></p> <p><code>})</code></p> <p><code>export&nbsp;</code><code>class</code>&nbsp;<code>MessageService { </code></p> <p><code>&nbsp;&nbsp;</code><code>messages: string[] = [];</code></p> <p><code>&nbsp;</code></p> <p><code>&nbsp;&nbsp;</code><code>add(message: string) { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.messages.push(message);</code></p> <p><code>&nbsp;&nbsp;</code><code>}</code></p> <p><code>&nbsp;</code></p> <p><code>&nbsp;&nbsp;</code><code>clear() { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.messages = [];</code></p> <p><code>&nbsp;&nbsp;</code><code>}</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

该服务对外暴露了它的 [messages][] 缓存，以及两个方法：`add()` 方法往缓存中添加一条消息，`clear()` 方法用于清空缓存。

### 把它注入到 `HeroService` 中 ###

重新打开 `HeroService`，并且导入 `MessageService`。

**/src/app/hero.service.ts (import MessageService)**

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>import</code>&nbsp;<code>{ MessageService } from&nbsp;</code><code>'./message.service'</code><code>;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

修改这个构造函数，添加一个私有的 `messageService` 属性参数。 Angular 将会在创建 `HeroService` 时把 `MessageService` 的单例注入到这个属性中。

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>constructor(</code><code>private</code>&nbsp;<code>messageService: MessageService) { }</code></p> </td> 
  </tr> 
 </tbody> 
</table>

这是一个典型的“服务中的服务”场景： 你把 `MessageService` 注入到了 `HeroService` 中，而 `HeroService` 又被注入到了 `HeroesComponent` 中。

### 从 `HeroService` 中发送一条消息 ###

修改 `getHeroes` 方法，在获取到英雄数组时发送一条消息。

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>getHeroes(): Observable&lt;Hero[]&gt; { </code></p> <p><code>&nbsp;&nbsp;</code><code>// TODO: send the message _after_ fetching the heroes</code></p> <p><code>&nbsp;&nbsp;</code><code>this</code><code>.messageService.add(</code><code>'HeroService: fetched heroes'</code><code>);</code></p> <p><code>&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>of(HEROES);</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

### 从 `HeroService` 中显示消息 ###

`MessagesComponent` 可以显示所有消息， 包括当 `HeroService` 获取到英雄数据时发送的那条。

打开 `MessagesComponent`，并且导入 `MessageService`。

**/src/app/messages/messages.component.ts (import MessageService)**

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>import</code>&nbsp;<code>{ MessageService } from&nbsp;</code><code>'../message.service'</code><code>;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

修改构造函数，添加一个 **public** 的 `messageService` 属性。 Angular 将会在创建 `MessagesComponent` 的实例时 把 `MessageService` 的实例注入到这个属性中。

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>constructor(</code><code>public</code>&nbsp;<code>messageService: MessageService) {}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

这个`messageService`属性必须是公共属性，因为你将会在模板中绑定到它。

Angular 只会绑定到组件的*公共*属性。

### 绑定到 `MessageService` ###

把 CLI 生成的 `MessagesComponent` 的模板改成这样：

**src/app/messages/messages.component.html**

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>&lt;div *ngIf=</code><code>"messageService.messages.length"</code><code>&gt;</code></p> <p>&nbsp;</p> <p><code>&nbsp;&nbsp;</code><code>&lt;h2&gt;Messages&lt;/h2&gt;</code></p> <p><code>&nbsp;&nbsp;</code><code>&lt;button&nbsp;</code><code>class</code><code>=</code><code>"clear"</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>(click)=</code><code>"messageService.clear()"</code><code>&gt;clear&lt;/button&gt;</code></p> <p><code>&nbsp;&nbsp;</code><code>&lt;div *ngFor=</code><code>'let message of messageService.messages'</code><code>&gt; { {message}} &lt;/div&gt;</code></p> <p>&nbsp;</p> <p><code>&lt;/div&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

这个模板直接绑定到了组件的 `messageService` 属性上。

*  `*`[ngIf][] 只有在有消息时才会显示消息区。
 *  `*`[ngFor][] 用来在一系列 `<div>` 元素中展示消息列表。
 *  Angular 的[事件绑定][Link 6]把按钮的 `click` 事件绑定到了 `MessageService.clear()`。

当你把 [最终代码][Link 5] 某一页的内容添加到 `messages.component.css` 中时，这些消息会变得好看一些。

刷新浏览器，页面显示出了英雄列表。 滚动到底部，就会在消息区看到来自 `HeroService` 的消息。 点击“清空”按钮，消息区不见了。

## 查看最终代码 ##

你的应用应该变成了这样 [在线例子][Link 7] / [下载范例][Link 8]。本页所提及的代码文件如下。

如果你想直接在 stackblitz 运行本页中的例子，请单击链接：[https://stackblitz.com/github/cwiki-us-angular/cwiki-us-angular-tour-of-hero-services][https_stackblitz.com_github_cwiki-us-angular_cwiki-us-angular-tour-of-hero-services]

本页中所提及的代码如下：[https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-services][https_github.com_cwiki-us-angular_cwiki-us-angular-tour-of-hero-services]

对应的文件列表和代码链接如下：

<table> 
 <tbody> 
  <tr> 
   <th> <p>文件名</p> </th> 
   <th> <p>源代码</p> </th> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <td>src/app/hero.service.ts</td> 
   <td><a href="https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-services/blob/master/src/app/hero.service.ts" rel="nofollow">https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-services/blob/master/src/app/hero.service.ts</a></td> 
  </tr> 
  <tr> 
   <td>src/app/heroes/heroes.component.ts</td> 
   <td><a href="https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-services/blob/master/src/app/heroes/heroes.component.ts" rel="nofollow">https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-services/blob/master/src/app/heroes/heroes.component.ts</a></td> 
  </tr> 
  <tr> 
   <td>src/app/messages/messages.component.ts</td> 
   <td><a href="https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-services/blob/master/src/app/messages/messages.component.ts" rel="nofollow">https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-services/blob/master/src/app/messages/messages.component.ts</a></td> 
  </tr> 
  <tr> 
   <td>src/app/messages/messages.component.html</td> 
   <td><a href="https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-services/blob/master/src/app/messages/messages.component.html" rel="nofollow">https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-services/blob/master/src/app/messages/messages.component.html</a></td> 
  </tr> 
  <tr> 
   <td>src/app/messages/messages.component.css</td> 
   <td><a href="https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-services/blob/master/src/app/messages/messages.component.css" rel="nofollow">https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-services/blob/master/src/app/messages/messages.component.css</a></td> 
  </tr> 
  <tr> 
   <td>src/app/app.module.ts</td> 
   <td><a href="https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-services/blob/master/src/app/app.module.ts" rel="nofollow">https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-services/blob/master/src/app/app.module.ts</a></td> 
  </tr> 
  <tr> 
   <td>src/app/app.component.html</td> 
   <td><a href="https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-services/blob/master/src/app/app.component.html" rel="nofollow">https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-services/blob/master/src/app/app.component.html</a></td> 
  </tr> 
 </tbody> 
</table>

## 小结 ##

*  你把数据访问逻辑重构到了 `HeroService` 类中。
 *  你在根注入器中把 `HeroService` 注册为该服务的提供商，以便在别处可以注入它。
 *  你使用 [Angular 依赖注入][Link 1]机制把它注入到了组件中。
 *  你给 `HeroService` 中获取数据的方法提供了一个异步的函数签名。
 *  你发现了 `Observable` 以及 RxJS 库。
 *  你使用 RxJS 的 `of()` 方法返回了一个模拟英雄数据的*可观察对象* (`Observable<Hero[]>`)。
 *  在组件的 `ngOnInit` 生命周期钩子中调用 `HeroService` 方法，而不是构造函数中。
 *  你创建了一个 `MessageService`，以便在类之间实现松耦合通讯。
 *  `HeroService` 连同注入到它的服务 `MessageService` 一起，注入到了组件中。

[https://www.cwiki.us/display/AngularZH/Services][https_www.cwiki.us_display_AngularZH_Services]

转载于:https://my.oschina.net/u/2344080/blog/3056298

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220114/300bd234ef59479589281a77b9024ea5.png
[https_github.com_cwiki-us-angular_cwiki-us-angular-tour-of-hero-services]: https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-services
[Link 1]: https://angular.ossez.com/guide/dependency-injection
[Injectable]: https://angular.ossez.com/api/core/Injectable
[Link 2]: https://angular.ossez.com/tutorial/toh-pt4#inject-message-service
[Component]: https://angular.ossez.com/api/core/Component
[Link 3]: https://angular.ossez.com/tutorial/toh-pt4#inject
[providedIn]: https://angular.ossez.com/api/core/Injectable#providedIn
[Injectable 1]: https://angular.io/api/core/Injectable
[Link 4]: https://angular.ossez.com/guide/providers
[Link 5]: https://angular.ossez.com/tutorial/toh-pt4#final-code-review
[HttpClient.get_Observable]: https://angular.ossez.com/guide/http
[RxJS]: http://reactivex.io/rxjs/
[HTTP]: https://angular.ossez.com/tutorial/toh-pt6
[HttpClient]: https://angular.ossez.com/api/common/http/HttpClient
[messages]: https://angular.ossez.com/api/service-worker/SwPush#messages
[ngIf]: https://angular.ossez.com/api/common/NgIf
[ngFor]: https://angular.ossez.com/api/common/NgForOf
[Link 6]: https://angular.ossez.com/guide/template-syntax#event-binding
[Link 7]: https://angular.ossez.com/generated/live-examples/toh-pt4/stackblitz.html
[Link 8]: https://angular.ossez.com/generated/zips/toh-pt4/toh-pt4.zip
[https_stackblitz.com_github_cwiki-us-angular_cwiki-us-angular-tour-of-hero-services]: https://stackblitz.com/github/cwiki-us-angular/cwiki-us-angular-tour-of-hero-services
[https_www.cwiki.us_display_AngularZH_Services]: https://www.cwiki.us/display/AngularZH/Services