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: "..."
};