5.服务

一. 创建英雄服务：

把获取英雄数据的任务重构为一个单独的服务，它将提供英雄数据，并把服务在所有需要英雄数据的组件间共享

1.英雄数据类型：hero.ts

export class Hero{
  id:number;
  pic:string;
  name:string;
  ...
}

2.模拟的英雄数据：mock-heroes.ts

import { Hero } from './hero'
export const HEROES:Hero[]=[
   { },{ },{ }
];

3.在app.component.ts中添加一个尚未初始化的heroes属性:

heroes:Hero[];

4.创建hero.service.ts

import { Injectable } from '@angular/core';  //依赖注入
@Injectable()                               //@Injectable()装饰器
export class HeroService{

}

5.获取英雄数据，返回模拟的英雄数据：getHeroes()方法

gerHeroes(): Hero[] {
  return HEROES;
}

二. 在其他组件中使用英雄服务：

1.导入HeroService

import { HeroService } from './hero.service';

2.注册HeroService提供商:@Component

providers:[HeroService];

3.注入HeroService
添加一个构造函数，并定义一个私有属性；添加组件的providers元数据。

constructor( private heroService: HeroService){ }

4.该服务被存入了一个私有变量heroService中。调用此服务，并获得数据

getHeroes():void{
    this.heroes=this.heroService.getHeroes();
}

5.ngOnInit 生命周期钩子

import { OnInit } from '@angular/core';
export class HeroesComponent implements OnInit{
    ngOnInit():void{
      this.getHeroes();
    }
}

三. 异步服务与承诺：

getHeroes()函数签名是同步的。为了协调视图与响应，我们可以使用承诺（Promise），它是一种异步技术，它会改变getHeroes()方法的签名。

1.把HeroService的getHeroes方法改写为返回承诺的形式：

gerHeroes(): Hero[] {
  return HEROES;
}

修改后：

getHeroes(): Promise<Hero[]> {
  return Promise.resolve(HEROES);
}

2.修改HeroService之后，this.heroes会被赋值为一个Promise而不再是英雄数组。

getHeroes():void{
    this.heroes=this.heroService.getHeroes();
}

修改后：

getHeroes(): void {
  this.heroService.getHeroes().then(heroes => this.heroes = heroes);
}