1 为什么需要服务
组件应该聚焦于展示数据，而把数据访问的职责委托给某个服务。
服务不要使用 new 来创建此服务，而要依靠 Angular 的依赖注入机制把它注入到 HeroesComponent 的构造函数中。服务是在多个“互相不知道”的类之间共享信息的好办法。
2 @Injectable() 服务
服务导入了 Angular 的 Injectable(https://www.angular.cn/api/core/Injectable) 符号，并且给这个服务类添加了 @Injectable()(https://www.angular.cn/api/core/Injectable) 装饰器。 它把这个类标记为依赖注入系统的参与者之一。HeroService 类将会提供一个可注入的服务，并且它还可以拥有自己的待注入的依赖。 目前它还没有依赖，但是很快就会有了
@Injectable()(https://www.angular.cn/api/core/Injectable) 装饰器会接受该服务的元数据对象，就像 @Component(https://www.angular.cn/api/core/Component)() 对组件类的作用一样。
3 HeroesComponent使用服务
3.1 导入服务
import { HeroService } from '../hero.service';
3.2 注入HeroService
往构造函数中添加一个私有的 heroService，其类型为 HeroService。
constructor(private heroService: HeroService) { }
这个参数同时做了两件事：1. 声明了一个私有 heroService 属性，2. 把它标记为一个 HeroService 的注入点。
当 Angular 创建 HeroesComponent 时，依赖注入系统就会把这个 heroService 参数设置为 HeroService 的单例对象。
3.3 获取数据
创建一个函数，以从服务中获取这些英雄数据。
getHeroes(): void {
this.heroes = this.heroService.getHeroes();
}
在 ngOnInit 中调用它
ngOnInit() {
this.getHeroes();
}
注：可以在构造函数中调用 getHeroes()，但那不是最佳实践。
让构造函数保持简单，只做初始化操作，比如把构造函数的参数赋值给属性。 构造函数不应该做任何事。 它肯定不能调用某个函数来向远端服务（比如真实的数据服务）发起 HTTP 请求。
4 可观察（Observable）的数据
在真实的应用中，数据一般都是从远端服务器获取的数据，是异步操作。
所以HeroService必须等服务器给出回应，所以组件中的getHeroes（）不能立即返回英雄数据，浏览器不不会在该服务等待期间停止响应。即：
HeroService.getHeroes() 必须具有某种形式的异步函数签名。它可以使用回调函数，可以返回 Promise（承诺），也可以返回 Observable（可观察对象）。
4.1 修改服务文件 HeroService
1 引入观察者模式Observable和R小JS的of()函数来模拟从服务器返回数据
import { Observable, of } from 'rxjs';
2 把服务文件中的getHeroes方法改成这样：
getHeroes(): Observable<Hero[]> {
return of(HEROES);
}
of(HEROES) 会返回一个 Observable<Hero[]>，它会发出单个值，这个值就是这些模拟英雄的数组。
4.2 在 HeroesComponent 中订阅
HeroService.getHeroes 方法之前返回一个 Hero[]， 现在它返回的是 Observable<Hero[]>
所以在HeroesComponent中也向本服务中的这种形式看齐。
getHeroes(): void {
this.heroService.getHeroes()
.subscribe(heroes => this.heroes = heroes);
}
Observable.subscribe() 是关键的差异点。
上一个版本把英雄的数组赋值给了该组件的 heroes 属性。 这种赋值是同步的，这里包含的假设是服务器能立即返回英雄数组或者浏览器能在等待服务器响应时冻结界面。
当 HeroService 真的向远端服务器发起请求时，这种方式就行不通了。
新的版本等待 Observable 发出这个英雄数组，这可能立即发生，也可能会在几分钟之后。 然后，subscribe 函数把这个英雄数组传给这个回调函数，该函数把英雄数组赋值给组件的 heroes 属性。
使用这种异步方式，当 HeroService 从远端服务器获取英雄数据时，就可以工作了。
5 显示消息
在这一节，你将
添加一个 MessagesComponent，它在屏幕的底部显示应用中的消息。
创建一个可注入的、全应用级别的 MessageService，用于发送要显示的消息。
把 MessageService 注入到 HeroService 中。
当 HeroService 成功获取了英雄数据时显示一条消息。
5.1 创建 MessagesComponent
1. import { Injectable from '@angular/core';
3. @Injectable({
4. providedIn: 'root',
5. })
6. export class MessageService {
7. messages: string[] = [];
9. add(message: string) {
10. this.messages.push(message);
11. }
13. clear() {
14. this.messages = [];
15. }
16. }
5.2 把它注入到 HeroService 中
import { MessageService } from './message.service';
constructor(private messageService: MessageService) { }
5.3 从 HeroService 中发送一条消息
getHeroes(): Observable<Hero[]> {
// TODO: send the message _after_ fetching the heroes
this.messageService.add('HeroService: fetched heroes');
return of(HEROES);
}
5.4 在 MessagesComponent 显示
<div *ngIf="messageService.messages.length">
<h2>Messages</h2>
<button class="clear (click)="messageService.clear()">clear</button>
<div *ngFor='let message of messageService.messages'>
{{message}}
</div>
</div>
