Skrivning og registrering af værdier
Implementér writeValue og callbacks til ændringer.
Skrivning og registrering af værdier er en gratis Angular Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Angular Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Angular Academy-kurset indeholder 4 lektioner i alt.
To kernemetoder
Kernen i en værdileverandør er at flytte data i begge retninger: writeValue fører modelværdien ind i din visning, og callbacken fra registerOnChange sender brugerens ændringer tilbage til modellen.
writeValue
Angular kalder writeValue, når formularen angiver eller nulstiller kontrollens værdi. Gem den i din komponents tilstand, så visningen afspejler den.
value = 0;
writeValue(value: number): void {
this.value = value ?? 0;
}Håndtering af null
writeValue kan modtage null ved nulstilling. Normalisér den til en sikker standardværdi, så din skabelon ikke går i stykker.
writeValue(value: string | null): void {
this.text = value ?? '';
}registerOnChange
Angular giver dig en callback, som skal kaldes, hver gang værdien ændres. Gem den; du kalder den ved brugerinteraktion.
private onChange: (v: number) => void = () => {};
registerOnChange(fn: (v: number) => void): void {
this.onChange = fn;
}Udsendelse af ændringer
Når brugeren interagerer, skal du opdatere den interne tilstand og kalde den gemte onChange-callback med den nye værdi for at opdatere formularmodellen.
select(rating: number): void {
this.value = rating;
this.onChange(rating);
}Forbindelse af skabelonen
Skabelonen viser den aktuelle tilstand og udløser din handler ved brugerhandlinger, hvorefter den kalder onChange.
template: '<button *ngFor="let s of stars" (click)="select(s)" [class.on]="s <= value">star</button>'Hold visningen synkroniseret
Fordi writeValue opdaterer den interne tilstand, og skabelonen binder til den, afspejles programmatiske formularændringer (f.eks. patchValue) straks i din komponent.
Velegnet til OnPush
Ved OnPush-ændringsregistrering skal du opdatere tilstanden via komponentfelter og lade bindingerne reagere. Hvis du ændrer tilstanden fra asynkrone kilder, skal du markere den til kontrol eller bruge signaler for at holde visningen opdateret.
Kald ikke onChange i writeValue
Vigtigt: Kald aldrig onChange inde fra writeValue. Det vil sende programmatiske opdateringer tilbage til modellen og kan forårsage løkker. onChange er kun til brugerinitierede ændringer.
Typning af værdien
Giv din kontrolkomponent en konkret værditype (tal, streng eller en brugerdefineret grænseflade), og typ metoderne tilsvarende for at opnå en mere sikker integration med reaktive formularer.
export class RatingComponent implements ControlValueAccessor {
value = 0;
writeValue(v: number) { this.value = v ?? 0; }
registerOnChange(fn: (v: number) => void) { this.onChange = fn; }
}Resultatet indtil videre
Med writeValue og registerOnChange implementeret læser kontrolkomponenten fra formularmodellen og skriver til den. Dernæst tilføjer du håndtering af deaktiveret og berørt tilstand for at få en komplet brugeroplevelse.
Hurtigt tjek
Tjek din viden om skrivning af værdier.
Opsummering
Du implementerede writeValue (fra model til visning, inklusive håndtering af null), brugte registerOnChange-tilbagekaldet til at udsende ændringer fra brugeren (fra visning til model), forbandt skabelonen og lærte, at du aldrig må kalde onChange fra writeValue.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 38
- Lektioner
- 144
Ofte stillede spørgsmål
Er lektionen “Skrivning og registrering af værdier” gratis?
Ja — alle 3 lektioner i læringssporet Angular Academy, inklusive “Skrivning og registrering af værdier”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Angular Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Skrivning og registrering af værdier”?
Implementér writeValue og callbacks til ændringer. Du øver dig i Angular Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Angular Academy?
Der kræves ingen tidligere erfaring. Angular Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “Skrivning og registrering af værdier”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Angular Academy-lektion?
Ja. Alle Angular Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Grænsefladen ControlValueAccessor
- Skrivning og registrering af værdier
- Håndtering af deaktiverede og berørte tilstande
- Validering i brugerdefinerede kontroller