Zapisywanie i rejestrowanie wartości
Implementować writeValue i callbacki zmian
Zapisywanie i rejestrowanie wartości to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.
Dwie podstawowe metody
Istotą akcesora wartości jest dwukierunkowe przenoszenie danych: writeValue przekazuje wartość modelu do widoku, a funkcja zwrotna z registerOnChange wysyła zmiany użytkownika z powrotem do modelu.
writeValue
Angular wywołuje writeValue, gdy formularz ustawia lub resetuje wartość kontrolki. Należy zapisać ją w stanie komponentu, aby widok ją odzwierciedlał.
value = 0;
writeValue(value: number): void {
this.value = value ?? 0;
}Obsługa wartości null
writeValue może otrzymać null podczas resetowania. Znormalizuj tę wartość do bezpieślnej wartości domyślnej, aby nie powodowała problemów w szablonie.
writeValue(value: string | null): void {
this.text = value ?? '';
}registerOnChange
Angular przekazuje funkcję zwrotną, którą należy wywoływać za każdym razem, gdy zmieni się wartość. Zapisz ją — wywołasz ją podczas interakcji użytkownika.
private onChange: (v: number) => void = () => {};
registerOnChange(fn: (v: number) => void): void {
this.onChange = fn;
}Przekazywanie zmian
Gdy użytkownik wejdzie w interakcję, zaktualizuj stan wewnętrzny i wywołaj zapisaną funkcję zwrotną onChange z nową wartością, aby zaktualizować model formularza.
select(rating: number): void {
this.value = rating;
this.onChange(rating);
}Podłączanie szablonu
Szablon renderuje bieżący stan i uruchamia procedurę obsługi podczas działań użytkownika, a ta następnie wywołuje onChange.
template: '<button *ngFor="let s of stars" (click)="select(s)" [class.on]="s <= value">star</button>'Synchronizowanie widoku
Ponieważ writeValue aktualizuje stan wewnętrzny, a szablon jest z nim powiązany, programistyczne zmiany formularza (takie jak patchValue) są natychmiast odzwierciedlane w komponencie.
Zgodność z OnPush
W przypadku wykrywania zmian OnPush aktualizuj stan za pomocą pól komponentu i pozwól, aby reagowały na to powiązania. Jeśli zmieniasz stan ze źródeł asynchronicznych, oznacz komponent do sprawdzenia lub użyj signals, aby widok pozostał aktualny.
Nie wywołuj onChange w writeValue
Ważne: nigdy nie wywołuj onChange wewnątrz writeValue. Spowodowałoby to odesłanie programistycznych aktualizacji z powrotem do modelu i może prowadzić do pętli. onChange służy wyłącznie do zmian wywołanych przez użytkownika.
Typowanie wartości
Należy nadać kontrolce konkretny typ wartości (liczba, ciąg znaków lub niestandardowy interfejs) i odpowiednio typować metody, aby zapewnić bezpieczniejszą integrację z formularzami reaktywnymi.
export class RatingComponent implements ControlValueAccessor {
value = 0;
writeValue(v: number) { this.value = v ?? 0; }
registerOnChange(fn: (v: number) => void) { this.onChange = fn; }
}Dotychczasowy rezultat
Po zaimplementowaniu writeValue i registerOnChange kontrolka odczytuje dane z modelu formularza i zapisuje je w nim. Następnie należy dodać obsługę stanu wyłączenia i stanu oznaczającego dotknięcie, aby zapewnić kompletny UX.
Szybkie sprawdzenie
Sprawdź swoją wiedzę na temat zapisywania wartości.
Podsumowanie
Zaimplementowano writeValue (z modelu do widoku, z obsługą wartości null), użyto wywołania zwrotnego registerOnChange do emitowania zmian użytkownika (z widoku do modelu), połączono szablon oraz poznano zasadę, aby nigdy nie wywoływać onChange z poziomu writeValue.
Często zadawane pytania
Czy lekcja „Zapisywanie i rejestrowanie wartości” jest bezpłatna?
Tak — pełny tekst „Zapisywanie i rejestrowanie wartości” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Zapisywanie i rejestrowanie wartości”?
Implementować writeValue i callbacki zmian Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Angular Academy?
Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Zapisywanie i rejestrowanie wartości”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?
Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Interfejs ControlValueAccessor
- Zapisywanie i rejestrowanie wartości
- Obsługa stanów disabled i touched
- Walidacja w niestandardowych kontrolkach