Angular2にて、依存性の注入（dependency Injection）を行う

AngularJSでは、引数の情報を用いてDIを行っていましたが、 Angular2ではやり方が大きく変わりました。

今回はAngular2でDIを実践しようと思います。具体的には、app.componentに、ボタンをクリックした回数を保持するClickButtonManagerというサービスを注入してみたいと思います。

Angular2にて、依存性の注入（dependency Injection）を行う
結果

0. 準備

新規プロジェクトを作成し、サーバをスタートさせます。

ng new angular-di
ng serve

1. ClickSaveServiceの生成

ng g service click-save

以下のようなファイルが出来上がります。 ※画像

2. ClickSaveServiceの編集

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

@Injectable()
export class ClickSaveService {

  constructor() { } 
  
  /** ここから */
  public clickCount :number = 0;

  clickCountUp() :void{
    console.log('DIされたサービスがボタンをクリックされた回数に1を足すよ');
    this.clickCount ++; 
  }
  /** ここまで追加 */
}

3. app.componentのコンストラクタにサービスを注入

import { Component } from '@angular/core';
import { ClickSaveService } from './click-save.service'; // 追加

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [ ClickSaveService ] // 追加
})
export class AppComponent {
  private title = 'app';
  private clickSaveService :ClickSaveService; // 追加

  /** ここから */
  constructor(clickSaveService :ClickSaveService) {
    this.clickSaveService = clickSaveService;
  }

  onClickButton() {
    this.clickSaveService.clickCountUp();
    console.log(this.clickSaveService.clickCount);
  }
  /** ここまで追加 */
}