Werte schreiben und registrieren
writeValue und Change-Callbacks implementieren
Werte schreiben und registrieren 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.
Zwei zentrale Methoden
Das Wesentliche eines Value Accessors ist der bidirektionale Datentransfer: writeValue übernimmt den Modellwert in Ihre View, und der Callback aus registerOnChange sendet Benutzeränderungen zurück an das Modell.
writeValue
Angular ruft writeValue auf, wenn das Formular den Wert des Controls setzt oder zurücksetzt. Speichern Sie ihn im Zustand Ihrer Komponente, damit die View ihn widerspiegelt.
value = 0;
writeValue(value: number): void {
this.value = value ?? 0;
}Null behandeln
writeValue kann beim Zurücksetzen null erhalten. Normalisieren Sie den Wert auf einen sicheren Standardwert, damit Ihr Template nicht fehlschlägt.
writeValue(value: string | null): void {
this.text = value ?? '';
}registerOnChange
Angular übergibt Ihnen einen Callback, den Sie bei jeder Wertänderung aufrufen. Speichern Sie ihn, damit Sie ihn bei einer Benutzerinteraktion aufrufen können.
private onChange: (v: number) => void = () => {};
registerOnChange(fn: (v: number) => void): void {
this.onChange = fn;
}Änderungen auslösen
Wenn Sie interagieren, aktualisieren Sie den internen Zustand und rufen den gespeicherten onChange-Callback mit dem neuen Wert auf, um das Formularmodell zu aktualisieren.
select(rating: number): void {
this.value = rating;
this.onChange(rating);
}Template anbinden
Das Template rendert den aktuellen Zustand und löst bei Benutzeraktionen Ihren Handler aus, der anschließend onChange aufruft.
template: '<button *ngFor="let s of stars" (click)="select(s)" [class.on]="s <= value">star</button>'View synchron halten
Da writeValue den internen Zustand aktualisiert und das Template daran gebunden ist, werden programmatische Formularänderungen (z. B. durch patchValue) sofort in Ihrer Komponente sichtbar.
OnPush-kompatibel
Bei der OnPush-Änderungserkennung aktualisieren Sie den Zustand über Komponentenfelder und lassen die Bindings reagieren. Wenn Sie den Zustand aus asynchronen Quellen verändern, markieren Sie die Komponente zur Prüfung oder verwenden Sie Signals, damit die View aktuell bleibt.
onChange nicht in writeValue aufrufen
Wichtig: Rufen Sie onChange niemals innerhalb von writeValue auf. Dadurch würden programmatische Aktualisierungen zurück an das Modell gespiegelt, was Schleifen verursachen kann. onChange ist ausschließlich für benutzergesteuerte Änderungen vorgesehen.
Den Wert typisieren
Geben Sie Ihrem Control einen konkreten Werttyp (number, string, eine eigene Schnittstelle) und typisieren Sie die Methoden entsprechend, um die Integration in reaktive Formulare sicherer zu machen.
export class RatingComponent implements ControlValueAccessor {
value = 0;
writeValue(v: number) { this.value = v ?? 0; }
registerOnChange(fn: (v: number) => void) { this.onChange = fn; }
}Bisheriges Ergebnis
Mit der Implementierung von writeValue und registerOnChange liest das Control Werte aus dem Formularmodell und schreibt Werte dorthin zurück. Als Nächstes fügen Sie die Behandlung von Deaktivierung und Berührung hinzu, damit die UX vollständig ist.
Kurze Überprüfung
Überprüfen Sie Ihr Wissen zum Schreiben von Werten.
Zusammenfassung
Sie haben writeValue implementiert (vom Modell zur Ansicht, einschließlich der Behandlung von null), den registerOnChange-Callback verwendet, um Benutzeränderungen auszugeben (von der Ansicht zum Modell), das Template angebunden und gelernt, dass onChange niemals aus writeValue aufgerufen werden darf.
Häufig gestellte Fragen
Ist die Lektion „Werte schreiben und registrieren“ kostenlos?
Ja — der vollständige Text von „Werte schreiben und registrieren“ 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 „Werte schreiben und registrieren“?
writeValue und Change-Callbacks implementieren 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 „Werte schreiben und registrieren“?
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
- Die ControlValueAccessor-Schnittstelle
- Werte schreiben und registrieren
- Deaktivierte und berührte Zustände behandeln
- Validierung in benutzerdefinierten Steuerelementen