大牛's 筆記

 

可注入的服務

在 app 資料夾下建立 hero.service.ts 檔案，將它命名為 HeroService 並且 export 讓組件都可以使用。

我們注入了 Angular 的 Injectable 方法，並使用 @Injectable() 裝飾器來使用這個方法。

當 TypeScript 看到 @Injectable() 裝飾器時，會自動記錄此服務的中繼資料(metadata)。如果 Angular 需要這個服務注入到其他地方，就會使用這些中繼資料。

import { Injectable } from '@angular/core';

@Injectable()
export class HeroService {
}

取得英雄列表(原始資料)

在 hero.service.ts 中增加一個 getHeroes 方法。

使用者並不知道此服務是如何取回原始資料的。 HeroService 可以從任何地方取回資料，可以從 Web Service 或者 SQL 取回。

@Injectable()
export class HeroService {
  getHeroes() {
  }
}

接著在 app 資料夾底下新增一個 mock-heroes.ts 的檔案，從 app.component.ts 中把資料複製過來。

要注意的是，由於使用了 Hero Class ，所以要記得 import  Hero Class。

import { Hero } from './hero';
export var HEROES: Hero[] = [
  {id: 11, name: 'Mr. Nice'},
  {id: 12, name: 'Narco'},
  {id: 13, name: 'Bombasto'},
  {id: 14, name: 'Celeritas'},
  {id: 15, name: 'Magneta'},
  {id: 16, name: 'RubberMan'},
  {id: 17, name: 'Dynama'},
  {id: 18, name: 'Dr IQ'},
  {id: 19, name: 'Magma'},
  {id: 20, name: 'Tornado'}
];

回傳原始資料

回到 HeroService ，我們引用 HEROES 並回傳。

import { Injectable } from '@angular/core';

import { HEROES } from './mock-heroes';

@Injectable()
export class HeroService {
  getHeroes() {
    return HEROES;
  }
}

使用 HeroService 服務

在 AppComponent 中導入 HeroService。

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

導入之後要如何使用呢?一般來說會使用 new 關鍵字來建立 HeroService，但Angular2 並不建議這麼做。

heroService = new HeroService(); // don't do this

注入 HeroService