開発者ドキュメント

Angularのプロバイダー

Angular 2+のサービスを適切に注入するには、コンポーネント、親モジュール、またはアプリモジュールのいずれかにサービスを提供する必要があります。 appモジュールで提供されるサービスには、どこでも同じインスタンスが提供されます。 コンポーネントで提供される2つのサービスの例を次に示します。

コンポーネント:app.component.ts

import { Component } from '@angular/core';
import { WeatherApiService } from './weather-api.service';
import { AuthService } from './auth.service';

@Component({
  ...,
  providers: [WeatherApiService, AuthService]
})
export class AppComponent {
  constructor(public weatherApi: WeatherApiService,
              public auth: AuthService) {}

そしてここでは、代わりにモジュールで提供されます。

モジュール:app.module.ts

...

import { WeatherApiService } from './weather-api.service';
import { AuthService } from './auth.service';

クラスプロバイダー

デフォルトでは、Angularは同じクラス名とトークンを持つプロバイダーを注入しますが、useClassでは異なるクラスを使用できます。 たとえば、次の例では、 Auth トークンを使用してサービスを提供しますが、UserAuthクラスは次のようになります。

providers: [{ provide: Auth, useClass: UserAuth }]

エイリアスプロバイダー

古いプロバイダーを新しいプロバイダーによって処理されるようにエイリアスする場合は、useExistingを使用して行うことができます。 これは、たとえば、コンポーネントがまだ古いプロバイダーを使用している必要があるが、ロジックは新しいプロバイダーによって処理される必要がある場合に役立ちます。

providers: [{ provide: OldService, useExisting: NewService }]

バリュープロバイダー

ほとんどの場合、クラスはプロバイダーとして使用されますが、代わりにuseValueで単純な値を使用することもできます。

const AUTH_CONFIG = {
  apiKey: "...",
  authDomain: "..."
};


モバイルバージョンを終了