Angular 2-依存性注入

依存性注入は、実行時にコンポーネントの機能を追加する機能です。依存性注入を実装するために使用される例と手順を見てみましょう。

ステップ1 *-注入可能なデコレータを持つ別のクラスを作成します。注入可能なデコレータにより、このクラスの機能を任意のAngular JSモジュールで注入および使用できます。

@Injectable()
   export class classname {
}

ステップ2 *-次に、appComponentモジュールまたはサービスを使用するモジュールで、@ Componentデコレーターでプロバイダーとして定義する必要があります。

@Component ({
   providers : [classname]
})

これを達成する方法の例を見てみましょう。

ステップ1 *-app.service.tsというサービスの *ts ファイルを作成します。

Tsファイル

ステップ2 *-上記で作成したファイルに次のコードを配置します。

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

@Injectable()
export class appService {
   getApp(): string {
      return "Hello world";
   }
}

上記のプログラムについて、以下の点に注意する必要があります。

Injectableデコレータは、angular/coreモジュールからインポートされます。
Injectableデコレータで装飾されたappServiceというクラスを作成しています。
「Hello world」という単純な文字列を返すgetAppという単純な関数を作成しています。

ステップ3 *-app.component.tsファイルに次のコードを配置します。

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

import {
   appService
} from './app.service';

@Component({
   selector: 'my-app',
   template: '<div>{{value}}</div>',
   providers: [appService]
})

export class AppComponent {
   value: string = "";
   constructor(private _appService: appService) { }
   ngOnInit(): void {
      this.value = this._appService.getApp();
   }
}

上記のプログラムについて、以下の点に注意する必要があります。

まず、appComponentモジュールにappServiceモジュールをインポートします。
次に、このモジュールでサービスをプロバイダーとして登録します。
コンストラクターでは、appServiceモジュールの_appServiceという変数を定義して、appComponentモジュール内のどこからでも呼び出せるようにします。
例として、ngOnInitライフサイクルフックで、サービスのgetApp関数を呼び出し、出力をAppComponentクラスのvalueプロパティに割り当てました。

すべてのコード変更を保存し、ブラウザを更新すると、次の出力が得られます。

Hello World

Angular2-dependency-injection

Angular 2-依存性注入