Injection Tokens
Injizieren Sie klassenfremde Werte mit Tokens.
Injection Tokens ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.
Injection Tokens
Nicht jede Abhängigkeit ist eine Klasse. Um Werte wie Konfigurationsobjekte, Zeichenketten oder Interfaces zu injizieren, verwenden Sie ein InjectionToken als eindeutigen Schlüssel.
Warum Tokens
Klassen können direkt als DI-Schlüssel verwendet werden, Interfaces und primitive Werte jedoch nicht, da Interfaces zur Laufzeit nicht existieren. Ein InjectionToken stellt für diese Fälle einen stabilen, typisierten Schlüssel bereit.
Ein Token erstellen
Erstellen Sie ein Token mit new InjectionToken<T> und übergeben Sie eine für Menschen lesbare Beschreibung.
import { InjectionToken } from '@angular/core';
export const API_URL = new InjectionToken<string>('API_URL');Der Typparameter
Der generische Typparameter (hier string) gibt dem Token einen Typ, sodass injizierte Werte korrekt typisiert sind.
Einen Token-Wert bereitstellen
Registrieren Sie das Token mit einem Wert, indem Sie useValue in einem providers-Array verwenden.
// bootstrapApplication(AppComponent, {
// providers: [{ provide: API_URL, useValue: 'https://api.example.com' }]
// });Ein Token injizieren
Injizieren Sie das Token mit der inject-Funktion, um seinen Wert abzurufen.
import { inject } from '@angular/core';
import { API_URL } from './tokens';
export class Api {
private baseUrl = inject(API_URL);
}Tokens für Konfigurationen
Eine häufige Verwendung ist die App-Konfiguration: Definieren Sie ein Interface, erstellen Sie ein darauf typisiertes Token und stellen Sie ein Konfigurationsobjekt bereit.
export interface AppConfig { title: string; retries: number; }
export const APP_CONFIG = new InjectionToken<AppConfig>('APP_CONFIG');Die Konfiguration bereitstellen
Stellen Sie den Konfigurationswert anschließend beim Bootstrap bereit.
// providers: [{ provide: APP_CONFIG, useValue: { title: 'My App', retries: 3 } }]Standardwerte über eine Factory
Ein Token kann über eine Factory in seinen Optionen einen Standardwert liefern. Dadurch funktioniert es auch ohne expliziten Provider.
export const RETRIES = new InjectionToken<number>('RETRIES', {
providedIn: 'root',
factory: () => 3
});Tokens im Vergleich zu Klassen
Verwenden Sie eine Klasse als Schlüssel, wenn die Abhängigkeit eine Service-Klasse ist. Verwenden Sie ein InjectionToken für Werte, die keine Klassen sind: Konfigurationen, primitive Werte oder Objekte mit Interface-Typ.
Magic Strings vermeiden
InjectionTokens ersetzen fehleranfällige Zeichenketten-Schlüssel durch typisierte, kollisionsfreie Bezeichner und erkennen Fehler bereits zur Kompilierzeit.
Schnelltest: Tokens
Werte injizieren, die keine Klassen sind.
Zusammenfassung: Injection Tokens
Sie haben gelernt, dass InjectionToken typisierte Schlüssel zum Injizieren von Werten bereitstellt, die keine Klassen sind, etwa Konfigurationsobjekte, Zeichenketten und Daten mit Interface-Typ. Erstellen Sie ein Token mit new InjectionToken, stellen Sie es mit useValue oder einem Factory-Standardwert bereit und injizieren Sie es mit inject(). Damit haben Sie den Kurs „Dependency Injection“ abgeschlossen.
Häufig gestellte Fragen
Ist die Lektion „Injection Tokens“ kostenlos?
Ja — der vollständige Text von „Injection Tokens“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Injection Tokens“?
Injizieren Sie klassenfremde Werte mit Tokens. Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Angular Academy zu starten?
Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Injection Tokens“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?
Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.