Angular4の自作サービス

Angular4でサービスを作る方法です。
以下のコードを参考に任意の場所にサービスを作ります。
特徴的な部分はInjectableって書いてあるところですね。
他はページとかのクラスと同じ感じですね。

hero-array-service.ts

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

 @Injectable()
 export class HeroesArrayService {
   getHeroesArray(searchResult): Array<Object> {
     let heroesArray = []
     // 何かコード書く
     return heroesArray;
   }
   ...
 }

利用するときは以下のような感じで使います。

search.ts

 import { Component } from '@angular/core';
 import { NavController } from 'ionic-angular';
 import overwatchJs from 'overwatch-js';
 import { SEARCH_RESULT_INITIAL_DATA } from '../../assets/data/search-result-initial-data';
 // サービスをインポート
 import { HeroesArrayService } from '../../utilities/heroes-array-service';

 @Component({
   selector: 'page-search',
   templateUrl: 'search.html',
   providers: [HeroesArrayService]
 })
 export class SearchPage {
   searchResult;
   heroesArray;

   constructor(public navCtrl: NavController, private heroesArrayService: HeroesArrayService) {
     this.searchResult = {'hoge': 'fuga'};
   }
   // テストメソッド
   serviceTest() {
     // サービスを利用して、検索結果からヒーローの配列を成形する
     this.heroesArray = this.heroesArrayService.getHeroesArray(this.searchResult);
   }
 }

ページ単位でインポートします。app.module.tsにインポートする必要はないです。
あとはコンストラクタにも書いてますね。
他と大きく違うのは、コンポーネントのprovidersに記述するところでしょうか。

providers: [HeroesArrayService]

サービスは、クラスのメソッドとして普通に使います。

this.heroesArray = this.heroesArrayService.getHeroesArray(this.searchResult);

こんなかんじ。

参考
https://angular.io/tutorial/toh-pt4