53. InjectionToken — クラスではない値を配る

DIで配れるのはサービスクラスだけではありません。設定オブジェクトやAPIのベースURLのような「ただの値」も配れます。ただし値には型の実体(クラス)がないため、DIの目印として InjectionToken を作ります。new InjectionToken<string>('api.base.url') のように名前を付けて定義します。

配る側は providers に { provide: API_BASE_URL, useValue: 'https://api.example.com' } と登録し、受け取る側は inject(API_BASE_URL) と書きます。実務では、開発環境と本番環境でAPIのURLを切り替えたいときや、ライブラリに設定を渡したいときの定番手段です。値の出どころが1か所にまとまるのが利点です。

つまずきやすいのは、トークンを定義しただけで providers への登録を忘れるケースです。登録がないと実行時に NullInjectorError になります。また、inject(API_BASE_URL) の戻り値の型はトークンの型引数(この例では string)で決まるため、定義時に型引数を必ず付けておきましょう。

サンプルコード(フレームワーク環境が必要なため表示のみ)

import { InjectionToken, inject, Component } from '@angular/core';

// 「APIのベースURL」というDIの目印を作る(型引数で型を決める)
export const API_BASE_URL = new InjectionToken<string>('api.base.url');

// アプリ起動時の providers で値を登録する:
// bootstrapApplication(App, {
//   providers: [{ provide: API_BASE_URL, useValue: 'https://api.example.com' }],
// });

@Component({
  selector: 'app-user-list',
  template: '<p>接続先: {{ baseUrl }}</p>',
})
export class UserList {
  // クラスと同じ書き方で「値」を受け取れる(型は string になる)
  baseUrl = inject(API_BASE_URL);
}

サンプルコードで身につける(5本) →

学んだ概念を、素朴な例から実務寄りの例まで5つの具体例で確認します。

公式ドキュメントで詳しく ↗