かろてんはこう思いました

フロントエンドエンジニアになりたいバックエンドエンジニアの雑記。

Angular2にて、依存性の注入(dependency Injection)をする

Angular2にて、依存性の注入(dependency Injection)を行う

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

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

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);
  }
  /** ここまで追加 */
}

重要なのは、 * prividersにサービスを定義したクラスを記述すること * constructorにDIするサービスを記述すること の2点です。

結果

f:id:karoten512:20170907223211g:plain