Angular Academy · Lektion

Die inject-Funktion

Lösen Sie Abhängigkeiten mit der inject-Funktion auf.

Die inject-Funktion ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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.

Die inject-Funktion

Die Funktion inject() ruft eine Abhängigkeit aus dem Injektor ab. Sie ist die moderne Alternative zur Injection über Konstruktorparameter.

Grundlegende Verwendung

Rufen Sie inject mit der gewünschten Klasse auf und weisen Sie das Ergebnis einem Feld zu.

import { Component, inject } from '@angular/core';
import { DataService } from './data.service';

@Component({ selector: 'app-x', template: '' })
export class XComponent {
  private data = inject(DataService);
}

Im Vergleich zur Injection über den Konstruktor

Bei der älteren Variante werden Abhängigkeiten als Konstruktorparameter deklariert. inject() erfüllt dieselbe Aufgabe wie ein Feldinitialisierer und ist häufig übersichtlicher.

// old style:
// constructor(private data: DataService) {}

Wo inject aufgerufen werden kann

inject() muss in einem Injection Context ausgeführt werden: während der Erstellung einer Komponente, Direktive oder eines Services sowie in Feldinitialisierern und Factory-Funktionen von Providern.

Injection in einem Service

Verwenden Sie inject auch in Services, beispielsweise um den HttpClient abzurufen.

import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class Api {
  private http = inject(HttpClient);
}

Weniger Boilerplate

Mit inject vermeiden Sie lange Konstruktorsignaturen. Jede Abhängigkeit ist eine einfache Felddeklaration, die sich leicht lesen und neu anordnen lässt.

Injizierte Services verwenden

Nach der Injection rufen Sie den Service wie jedes andere Objekt auf.

export class XComponent {
  private store = inject(CounterStore);
  add() { this.store.increment(); }
}

inject in funktionalen Guards

Funktionale Routen-Guards und Resolver werden in einem Injection Context ausgeführt. Daher können Sie darin inject aufrufen, um auf Services zuzugreifen.

// export const authGuard = () => {
//   const auth = inject(AuthService);
//   return auth.isLoggedIn();
// };

Optionale Abhängigkeiten

inject akzeptiert Optionen, mit denen Sie eine Abhängigkeit beispielsweise als optional kennzeichnen können. In diesem Fall wird null zurückgegeben, statt einen Fehler auszulösen, wenn sie nicht bereitgestellt wurde.

// const logger = inject(Logger, { optional: true });

Außerhalb eines Injection Contexts

Wenn Sie inject außerhalb eines Injection Contexts aufrufen, zum Beispiel in einem setTimeout-Callback, wird ein Fehler ausgelöst. Erfassen Sie die Abhängigkeit stattdessen während der Erstellung.

Warum inject bevorzugen

inject funktioniert gut mit Mixins, Basisklassen und funktionalen APIs und hält Komponent Klassen kompakt. Es ist der empfohlene Ansatz im modernen Angular.

Schnelltest: inject

Eine Abhängigkeit abrufen.

Zusammenfassung: inject

Sie haben die Funktion inject() als moderne Möglichkeit kennengelernt, Abhängigkeiten abzurufen. Sie kann in Komponenten, Services und funktionalen Guards innerhalb eines Injection Contexts verwendet werden. Im Vergleich zur Injection über den Konstruktor reduziert sie Boilerplate und unterstützt Optionen wie optional. Als Nächstes folgen Provider und Gültigkeitsbereiche.

Häufig gestellte Fragen

Ist die Lektion „Die inject-Funktion“ kostenlos?

Ja — der vollständige Text von „Die inject-Funktion“ 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 „Die inject-Funktion“?

Lösen Sie Abhängigkeiten mit der inject-Funktion auf. 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 2 von 4.

Wie lange dauert die Lektion „Die inject-Funktion“?

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.

Alle Lektionen in diesem Kurs

← Zurück zu Angular Academy