Angular でサービスをクラスに注入する
Angular でサービスをクラスに注入する方法（コンポーネントではない）
サービスの提供
まず、サービスを @Injectable デコレータでデコレートする必要があります。これにより、Angular がサービスを認識し、インジェクションできるようになります。
@Injectable({
providedIn: 'root' // またはスコープを指定
})
export class MyService {
// サービス ロジック
}
クラスへのサービスの注入
次に、サービスを注入するクラスのコンストラクタに、サービス型をパラメータとして追加します。
export class MyOtherClass {
constructor(private myService: MyService) { }
// クラス ロジック
}
コンストラクタで注入されたサービスは、クラス内の任意の場所で利用できます。
export class MyOtherClass {
constructor(private myService: MyService) { }
myMethod() {
this.myService.doSomething();
}
}
NgModule でのサービスのプロバイダ登録
ルートレベルでサービスを使用したい場合は、NgModule の providers プロパティにサービスを登録する必要があります。
@NgModule({
declarations: [AppComponent],
imports: [],
providers: [MyService], // サービスを登録
bootstrap: [AppComponent]
})
export class AppModule { }
注意事項
- サービスをコンポーネントに注入する場合と同様に、スコープとプロバイダのオプションを使用できます。
- サービスを注入するクラスは、@Injectable デコレータでデコレートする必要はありません。
@Injectable({
providedIn: 'root'
})
export class MyService {
constructor() { }
doSomething() {
console.log('MyService: doSomething()');
}
}
my-other-class.ts
export class MyOtherClass {
constructor(private myService: MyService) { }
myMethod() {
this.myService.doSomething();
}
}
app.module.ts
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { MyService } from './my-service';
import { MyOtherClass } from './my-other-class';
@NgModule({
declarations: [
AppComponent,
MyOtherClass
],
imports: [],
providers: [MyService], // サービスを登録
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component } from '@angular/core';
import { MyOtherClass } from './my-other-class';
@Component({
selector: 'app-root',
template: `
<h1>Angular でサービスをクラスに注入する</h1>
<button (click)="myOtherClass.myMethod()">サービスのメソッドを実行</button>
`
})
export class AppComponent {
constructor(private myOtherClass: MyOtherClass) { }
}
このコードを実行すると、以下の出力がコンソールに出力されます。
MyService: doSomething()
ファクトリー パターンを使用すると、サービスのインスタンスの作成方法をより細かく制御できます。これは、サービスのインスタンスを毎回新しいインスタンスとして作成する必要がある場合や、サービスの依存関係を動的に注入する必要がある場合に役立ちます。
import { Injectable } from '@angular/core';
export class MyServiceFactory {
constructor() { }
createService(config: any): MyService {
return new MyService(config);
}
}
@Injectable({
providedIn: 'root'
})
export class MyService {
constructor(private config: any) { }
doSomething() {
console.log(this.config);
}
}
プロバイダ トークン
プロバイダ トークンを使用すると、同じサービスの異なるインスタンスを複数のクラスに注入できます。これは、異なる設定を持つ複数のサービス インスタンスが必要な場合に役立ちます。
import { Injectable, Provider } from '@angular/core';
export const MY_SERVICE_1_TOKEN = new InjectionToken<MyService>('my-service-1');
export const MY_SERVICE_2_TOKEN = new InjectionToken<MyService>('my-service-2');
@Injectable({
providedIn: 'root'
})
export class MyService {
constructor() { }
doSomething() {
console.log('MyService: doSomething()');
}
}
@NgModule({
declarations: [AppComponent],
imports: [],
providers: [
{ provide: MY_SERVICE_1_TOKEN, useClass: MyService }, // サービス 1 のインスタンス
{ provide: MY_SERVICE_2_TOKEN, useClass: MyService, deps: [MyServiceFactory] } // サービス 2 のインスタンス (ファクトリーを使用)
],
bootstrap: [AppComponent]
})
export class AppModule { }
第三者ライブラリ
Angular には、ng-dependency-injection や @angular-dependency-injection などの、依存関係の注入をさらに柔軟に制御できるサードパーティ製ライブラリがいくつかあります。
これらの方法は、より高度なユースケースで使用できますが、基本的なサービスの注入には**@Injectable** デコレータとコンストラクタのインジェクションを使用するのが最善の方法です。
適切な方法を選択
使用する方法は、特定のニーズによって異なります。以下の要素を考慮する必要があります。
- 依存関係の注入をより細かく制御する必要があるかどうか
- 同じサービスの複数のインスタンスが必要かどうか
- サービスのインスタンス化方法を制御する必要があるかどうか
angular typescript
