Angular Academy · Lektion

ngOnChanges und Input-Änderungen

Reagieren Sie auf Änderungen an Input-Properties.

ngOnChanges und Input-Änderungen 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.

Auf Änderungen von Eingaben reagieren

Mit dem OnChanges-Hook kann eine Komponente reagieren, sobald sich ihre @Input-Eigenschaften ändern. Angular ruft ngOnChanges vor ngOnInit und bei jeder Aktualisierung einer Eingabe auf.

OnChanges implementieren

Implementieren Sie das Interface OnChanges und fügen Sie eine Methode ngOnChanges hinzu, die ein SimpleChanges-Objekt empfängt.

import { Component, Input, OnChanges, SimpleChanges } from "@angular/core";

@Component({ selector: "app-demo", template: "" })
export class DemoComponent implements OnChanges {
  @Input() count = 0;
  ngOnChanges(changes: SimpleChanges): void {
    console.log(changes);
  }
}

Das SimpleChanges-Objekt

SimpleChanges ist eine nach Eingabenamen indizierte Map. Jeder Eintrag ist ein SimpleChange mit currentValue, previousValue und firstChange.

ngOnChanges(changes: SimpleChanges) {
  const c = changes["count"];
  if (c) {
    console.log(c.previousValue, "->", c.currentValue);
  }
}

Die erste Änderung erkennen

Das Flag firstChange ist beim ersten Setzen einer Eingabe auf true gesetzt. Verwenden Sie es, um die Initialisierung von späteren Aktualisierungen zu unterscheiden.

ngOnChanges(changes: SimpleChanges) {
  if (changes["count"]?.firstChange) {
    console.log("initial value");
  } else {
    console.log("updated value");
  }
}

Auf eine bestimmte Eingabe reagieren

Prüfen Sie vor dem Lesen immer, ob der Schlüssel vorhanden ist, da sich nicht jede Eingabe in jedem Zyklus ändert.

ngOnChanges(changes: SimpleChanges) {
  if ("userId" in changes) {
    this.reload(this.userId);
  }
}

Referenzbasierte Erkennung

ngOnChanges wird bei Änderungen der Referenz von Objekten und Arrays ausgelöst. Wenn Sie ein als Eingabe übergebenes Objekt verändern, wird der Hook NICHT ausgelöst.

// will NOT trigger ngOnChanges in parent-bound child:
this.config.theme = "dark";

// will trigger it:
this.config = { ...this.config, theme: "dark" };

Reihenfolge mit ngOnInit

Bei der Erstellung wird zuerst ngOnChanges mit den Anfangseingaben ausgeführt, danach ngOnInit. Anschließend wird ngOnChanges bei jeder Änderung von Eingaben erneut ausgeführt.

Alte und neue Werte vergleichen

Ein häufiger Anwendungsfall besteht darin, nur dann zu reagieren, wenn sich ein Wert tatsächlich unterscheidet, etwa indem Daten neu geladen werden, wenn sich eine ID-Eingabe ändert.

ngOnChanges(changes: SimpleChanges) {
  const id = changes["userId"];
  if (id && id.currentValue !== id.previousValue) {
    this.fetchUser(id.currentValue);
  }
}

Typsicherheit durch Typisierung

Sie können Werte aus changes oder direkt aus der Komponenteneigenschaft lesen. Nach ngOnChanges enthält die Eigenschaft bereits den aktuellen Wert.

ngOnChanges() {
  // this.count already updated here
  this.total = this.count * 2;
}

Wann OnChanges nicht verwendet werden sollte

Für einen aus einer einzelnen Eingabe abgeleiteten Zustand kann ein Getter oder ein berechneter Wert übersichtlicher sein. Verwenden Sie ngOnChanges für Seiteneffekte, die bei Aktualisierungen von Eingaben ausgeführt werden müssen.

Mehrere Eingaben gleichzeitig

Wenn sich mehrere Eingaben im selben Zyklus ändern, wird ngOnChanges einmal aufgerufen, wobei alle Änderungen in der SimpleChanges-Map enthalten sind.

ngOnChanges(changes: SimpleChanges) {
  // both keys may be present
  if (changes["min"] || changes["max"]) {
    this.validateRange();
  }
}

Kurze Wissensprüfung

Testen Sie Ihr Verständnis von OnChanges.

Zusammenfassung

Der OnChanges-Hook reagiert über eine SimpleChanges-Map mit currentValue, previousValue und firstChange auf Änderungen von Eingaben. Er wird bei Änderungen der Referenz ausgelöst. Verwenden Sie daher unveränderliche Aktualisierungen.

Häufig gestellte Fragen

Ist die Lektion „ngOnChanges und Input-Änderungen“ kostenlos?

Ja — der vollständige Text von „ngOnChanges und Input-Änderungen“ 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 „ngOnChanges und Input-Änderungen“?

Reagieren Sie auf Änderungen an Input-Properties. 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 „ngOnChanges und Input-Änderungen“?

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