Angular でサービスをクラスに注入する

2024-04-27

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 デコレータでデコレートする必要はありません。
サービスをコンポーネントに注入する場合と同様に、スコープとプロバイダのオプションを使用できます。

Angular でサービスをクラスに注入する方法：サンプルコード

my-service.ts

@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()

このサンプルコードは、Angular でサービスをクラスに注入する方法を理解するための基本的な例です。実際のアプリケーションでは、より複雑な依存関係を管理する必要がある場合があります。

これらの例は、Angular でサービスをクラスに注入する方法をさらに理解するのに役立ちます。

Angular でサービスをクラスに注入する方法：その他の方法

ファクトリーパターンを使用すると、サービスのインスタンスの作成方法をより細かく制御できます。これは、サービスのインスタンスを毎回新しいインスタンスとして作成する必要がある場合や、サービスの依存関係を動的に注入する必要がある場合に役立ちます。

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 { }