Angular Academy · Lektion

ngOnInit und Initialisierung

Führen Sie beim Start einer Component die Einrichtungslogik aus.

ngOnInit und Initialisierung ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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.

Was sind Lifecycle-Hooks?

Angular-Komponenten haben einen vom Framework verwalteten Lebenszyklus: Erstellung, Änderungserkennung, Rendering und Zerstörung. Lifecycle-Hooks ermöglichen es Ihnen, zu bestimmten Zeitpunkten Code auszuführen.

OnInit kennenlernen

Der OnInit-Hook wird einmal ausgeführt, nachdem Angular die Komponenteneingaben gesetzt und die initiale Ansicht gerendert hat. Er ist der übliche Ort für Initialisierungslogik.

OnInit implementieren

Implementieren Sie das Interface OnInit und fügen Sie die Methode ngOnInit hinzu. Angular ruft sie automatisch auf.

import { Component, OnInit } from "@angular/core";

@Component({ selector: "app-demo", template: "" })
export class DemoComponent implements OnInit {
  ngOnInit(): void {
    console.log("Component initialized");
  }
}

Konstruktor und ngOnInit

Der Konstruktor wird zuerst ausgeführt, bevor Eingaben gesetzt wurden, und sollte nur eine leichte Dependency Injection durchführen. Verwenden Sie ngOnInit für die eigentliche Einrichtung, sobald Eingaben verfügbar sind.

constructor(private http: HttpClient) {
  // inputs NOT ready yet
}

ngOnInit() {
  // inputs ARE ready here
}

Eingaben sind in ngOnInit bereit

Wenn ngOnInit ausgeführt wird, haben alle @Input-Eigenschaften bereits ihre vom übergeordneten Element gebundenen Anfangswerte.

@Input() userId!: string;

ngOnInit() {
  console.log(this.userId); // available
}

Daten in ngOnInit laden

Ein übliches Vorgehen besteht darin, Daten in ngOnInit aus einem Service zu laden, da Ihnen dort Eingaben und Abhängigkeiten zur Verfügung stehen.

ngOnInit() {
  this.userService.getUser(this.userId)
    .subscribe(u => this.user = u);
}

ngOnInit wird einmal ausgeführt

Im Gegensatz zu Hooks der Änderungserkennung wird ngOnInit während der Lebensdauer der Komponente genau einmal ausgeführt, direkt nach dem ersten ngOnChanges.

Reihenfolge im Verhältnis zu ngOnChanges

Wenn die Komponente Eingaben besitzt, wird zuerst ngOnChanges mit den Anfangswerten ausgelöst, danach ngOnInit. Ohne Eingaben wird ngOnInit trotzdem ausgeführt.

// sequence with inputs:
// 1. constructor
// 2. ngOnChanges (first)
// 3. ngOnInit

Formulare initialisieren

Das Erstellen reaktiver Formulare ist eine klassische Aufgabe für ngOnInit, da Sie möglicherweise injizierte Services zum Einrichten des Formulars benötigen.

form!: FormGroup;

ngOnInit() {
  this.form = this.fb.group({
    name: [""],
    email: [""]
  });
}

Konstruktoren schlank halten

Vermeiden Sie aufwendige Arbeiten im Konstruktor. Er wird ausgeführt, bevor Angular Eingaben verknüpft, und Seiteneffekte erschweren dort das Testen und Vorhersagen des Komponentenverhaltens.

Asynchrone Initialisierung

Sie können asynchrone Logik aus ngOnInit aufrufen, aber die Methode selbst gibt void zurück. Abonnieren Sie innerhalb der Methode oder verwenden Sie dort asynchrone Muster.

ngOnInit() {
  this.loadAsync();
}

private async loadAsync() {
  this.data = await firstValueFrom(this.api.get());
}

Kurze Wissensprüfung

Testen Sie Ihr Verständnis von OnInit.

Zusammenfassung

Der OnInit-Hook mit ngOnInit wird einmal ausgeführt, nachdem Eingaben gebunden wurden, und eignet sich ideal zum Laden von Daten und Einrichten von Formularen. Halten Sie den Konstruktor schlank und führen Sie die Initialisierung in ngOnInit durch.

Häufig gestellte Fragen

Ist die Lektion „ngOnInit und Initialisierung“ kostenlos?

Ja — der vollständige Text von „ngOnInit und Initialisierung“ 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 „ngOnInit und Initialisierung“?

Führen Sie beim Start einer Component die Einrichtungslogik aus. 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 1 von 4.

Wie lange dauert die Lektion „ngOnInit und Initialisierung“?

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