インジェクショントークン
トークンでクラスではない値を注入します。
「インジェクショントークン」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
インジェクショントークン
すべての依存関係がクラスとは限りません。設定オブジェクト、文字列、インターフェースなどの値を注入するには、固有のキーとしてInjectionTokenを使用します。
トークンを使う理由
クラスはDIのキーとして直接使用できますが、インターフェースやプリミティブ値は使用できません（インターフェースは実行時に消えるためです）。InjectionTokenを使うと、安定した型付きのキーを用意できます。
トークンの作成
new InjectionToken<T>を使い、人間が読める説明を渡してトークンを作成します。
import { InjectionToken } from '@angular/core';
export const API_URL = new InjectionToken<string>('API_URL');型パラメーター
ジェネリック型パラメーター（ここではstring）によってトークンに型が付与されるため、注入される値が適切な型になります。
トークン値の提供
providers配列でuseValueを使い、トークンを値に登録します。
// bootstrapApplication(AppComponent, {
// providers: [{ provide: API_URL, useValue: 'https://api.example.com' }]
// });トークンの注入
inject関数でトークンを注入し、その値を取得します。
import { inject } from '@angular/core';
import { API_URL } from './tokens';
export class Api {
private baseUrl = inject(API_URL);
}設定用のトークン
一般的な用途はアプリの設定です。インターフェースを定義し、それを型として指定したトークンを作成して、設定オブジェクトを提供します。
export interface AppConfig { title: string; retries: number; }
export const APP_CONFIG = new InjectionToken<AppConfig>('APP_CONFIG');設定の提供
次に、bootstrap時に設定値を提供します。
// providers: [{ provide: APP_CONFIG, useValue: { title: 'My App', retries: 3 } }]ファクトリによるデフォルト値
トークンのoptionsでファクトリを指定すると、デフォルト値を提供できます。明示的なproviderがなくても動作します。
export const RETRIES = new InjectionToken<number>('RETRIES', {
providedIn: 'root',
factory: () => 3
});トークンとクラスの比較
依存関係がサービスクラスの場合は、クラスをキーとして使用します。クラスではない値（設定、プリミティブ値、インターフェース型のオブジェクト）を注入する場合は、InjectionTokenを使用します。
マジックストリングを避ける
InjectionTokenは、壊れやすい文字列キーを、型付きで衝突のない識別子に置き換えます。これにより、誤りをコンパイル時に検出できます。
クイックチェック: トークン
クラスではない値を注入する。
まとめ: インジェクショントークン
InjectionTokenを使うと、設定オブジェクト、文字列、インターフェース型のデータなど、クラスではない値を注入するための型付きキーを提供できることを学びました。new InjectionTokenで作成し、useValueまたはファクトリのデフォルト値で提供して、inject()で注入します。Dependency Injectionコースを修了しました。
よくある質問
「インジェクショントークン」レッスンは無料ですか？
はい。「インジェクショントークン」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「インジェクショントークン」で何を学びますか？
トークンでクラスではない値を注入します。 ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「インジェクショントークン」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- サービスとInjectable
- inject関数
- プロバイダーとスコープ
- インジェクショントークン