Injectableってなに†

Angular2でDIするときのinjectする要素。

Injectableを作る†

• @Injectable（デコレータ）をつけて（多段Injectでなければ要らない？→そうみたいです※）

  @Injectable()

• classをexportする

  export class MyService{
    loadData(): string[] {
      return ['hoge', 'moge', 'fuga'];
    }
  }

@Injectableというデコレータを書くだけです。

オフィシャルでは、今は要らなくてもとりあえず書いておく、のがベストプラクティスだと言っています。

The HeroService doesn't have any dependencies at the moment. Add the decorator anyway. It is a "best practice" to apply the @Injectable() decorator ​from the start​ both for consistency and for future-proofing.

Injectableを利用（Inject）する†

• exportしたクラスをimportして

  import {MyService} from './my.service';

• メタデータのprividersに追加して

  @Component({
    ...
    providers: [MyService]
  })

• constructorの引数にする

  export class AppComponent{
    private list: string[];
    constructor(private myService: MyService) {
      this.list = myService.loadData();
    }
  }

コンストラクタの引数にするだけでDIされますが、この記述はInjectを省略しているだけのようです。また、providersにProviderを与えずにMyServiceを与えているのも省略した書き方です（参考記事を見てね）。

ソースコード†

• til/javascript/angular2/angular2-practical-ABC-r2 at master · fukuchiharuki/til

参考†

• Angular2のDIを知る - Qiita