angularjs2进阶教程4-创建可重用的服务数据

还是angularjs2入门1-文件结构分析的源码，将app名称tutorial-step4-services

import { Injectable } from '@angular/core';
import { Hero } from './hero';
import { HEROES } from './mock-heroes';
@Injectable()
export class HeroService {
    getHeroes(): Promise<Hero[]> {
        return Promise.resolve(HEROES);
    }
}

注入Injectable ，@Injectable()是必填的，代表元数据；注解一个Injectable组件,Injectable组件一般是服务类组件，单例模式。

创建mock-heroes，在任何文件都能引用。

2.根组件。我们写了一个带有初始化逻辑的ngOnInit方法，Angular会在适当的时候调用它。 在这个例子中，我们通过调用getHeroes来完成初始化。

export class AppComponent implements OnInit {
 title = 'Tour of Heroes';
 heroes: Hero[];
 selectedHero: Hero;
 constructor(private heroService: HeroService) { }
 getHeroes(): void {
  this.heroService.getHeroes().then(heroes => this.heroes = heroes);
 }
 ngOnInit(): void {
  this.getHeroes();
 }
 onSelect(hero: Hero): void {
  this.selectedHero = hero;
 }
}

ngOnInit 生命周期钩子。我们该在哪里调用getHeroes方法呢？在构造函数中吗？ 不 ！。多年的经验和惨痛的教训教育我们，应该把复杂的逻辑扔到构造函数外面去， 特别是那些需要从服务器获取数据的逻辑更是如此。

constructor构造器，声明heroService。

The constructor itself does nothing. The parameter simultaneously defines a private heroService property and identifies it as a HeroService injection site.

ngOnInit初始化事件，getHeroes方法用来获取数据。

As a result of our change toHeroService,we're Now settingthis.heroesto a Promise rather than an array of heroes.

We have to change our implementation toact on the Promise when it resolves. When the Promise resolves successfully,thenwe will have heroes to display.

We pass our callback function as an argument to the Promise'sthenmethod: