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: 'demo-app',
   template: '<div>{{value}}</div>',
   providers: [appService]
})

export class AppComponent {
   value: string = "";
   constructor(private _appService: appService) { }

   ngOnInit(): void {
      this.value = this._appService.getApp();
   }
}

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

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

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

サービス

Angular2-services

Angular 2-サービス