Değerleri Yazma ve Kaydetme
writeValue ve değişiklik geri çağırmalarını uygulayın
Değerleri Yazma ve Kaydetme, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.
İki Temel Yöntem
Bir değer erişicisinin temel görevi verileri iki yönde taşımaktır: writeValue, model değerini görünümünüze getirir; registerOnChange tarafından kaydedilen geri çağırma işlevi ise kullanıcı düzenlemelerini modele gönderir.
writeValue
Form, kontrolün değerini ayarladığında veya sıfırladığında Angular writeValue işlevini çağırır. Görünümün bu değeri yansıtması için değeri bileşen durumunuzda saklayın.
value = 0;
writeValue(value: number): void {
this.value = value ?? 0;
}null Değerini Yönetme
Sıfırlama sırasında writeValue işlevine null gönderilebilir. Şablonunuzun bozulmaması için bunu güvenli bir varsayılan değere dönüştürün.
writeValue(value: string | null): void {
this.text = value ?? '';
}registerOnChange
Angular, değer her değiştiğinde çağırmanız için size bir geri çağırma işlevi verir. Bu işlevi saklayın; kullanıcı etkileşiminde çağıracaksınız.
private onChange: (v: number) => void = () => {};
registerOnChange(fn: (v: number) => void): void {
this.onChange = fn;
}Değişiklikleri Bildirme
Kullanıcı etkileşimde bulunduğunda dahili durumu güncelleyin ve form modelini güncellemek için saklanan onChange geri çağırma işlevini yeni değerle çağırın.
select(rating: number): void {
this.value = rating;
this.onChange(rating);
}Şablonu Bağlama
Şablon, geçerli durumu görüntüler ve kullanıcı eylemlerinde işleyicinizi çalıştırır; işleyiciniz de ardından onChange işlevini çağırır.
template: '<button *ngFor="let s of stars" (click)="select(s)" [class.on]="s <= value">star</button>'Görünümü Senkron Tutma
writeValue dahili durumu güncellediği ve şablon bu duruma bağlandığı için programatik form değişiklikleri (örneğin patchValue) bileşeninize hemen yansır.
OnPush ile Uyumlu
OnPush değişiklik algılamayla durumu bileşen alanları üzerinden güncelleyin ve bağlamaların tepki vermesine izin verin. Zaman uyumsuz kaynaklardan değişiklik yaptığınızda görünümü güncel tutmak için denetim yapılmasını sağlayın veya sinyalleri kullanın.
writeValue İçinde onChange Çağırmayın
Önemli: writeValue içinden asla onChange çağırmayın. Bu, programatik güncellemeleri modele geri yansıtarak döngülere neden olabilir. onChange yalnızca kullanıcı kaynaklı değişiklikler içindir.
Değeri Türlendirme
Denetiminize somut bir değer türü (number, string veya özel bir interface) verin ve reactive forms ile daha güvenli tümleştirme için method'ları buna göre türlendirin.
export class RatingComponent implements ControlValueAccessor {
value = 0;
writeValue(v: number) { this.value = v ?? 0; }
registerOnChange(fn: (v: number) => void) { this.onChange = fn; }
}Şu Ana Kadarki Sonuç
writeValue ve registerOnChange uygulandığında denetim, form modelinden okur ve forma yazar. Sırada eksiksiz bir kullanıcı deneyimi için devre dışı ve dokunulmuş durumlarını ele almak var.
Hızlı Kontrol
Değer yazma bilginizi kontrol edin.
Özet
writeValue uyguladınız (modelden görünüme, null değerini ele alarak) ve kullanıcı değişikliklerini göndermek için registerOnChange geri çağırmasını kullandınız (görünümden modele), şablonu bağladınız ve writeValue içinden hiçbir zaman onChange çağırmamanız gerektiğini öğrendiniz.
Sıkça Sorulan Sorular
“Değerleri Yazma ve Kaydetme” dersi ücretsiz mi?
Evet — “Değerleri Yazma ve Kaydetme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.
“Değerleri Yazma ve Kaydetme” dersinde ne öğreneceğim?
writeValue ve değişiklik geri çağırmalarını uygulayın Angular Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Angular Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Angular Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“Değerleri Yazma ve Kaydetme” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Angular Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Angular Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- ControlValueAccessor Arayüzü
- Değerleri Yazma ve Kaydetme
- Devre Dışı ve Dokunulmuş Durumları Ele Alma
- Özel Denetimlerde Doğrulama