Angular Academy · درس

كتابة القيم وتسجيلها

نفّذ writeValue وعمليات استدعاء التغيير

كتابة القيم وتسجيلها درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.

الدالتان الأساسيتان

يكمن جوهر موفّر القيم في نقل البيانات في الاتجاهين: تنقل writeValue قيمة النموذج إلى العرض، ويرسل الاستدعاء القادم من registerOnChange تعديلات المستخدم إلى النموذج.

writeValue

تستدعي Angular الدالة writeValue عندما يعيّن النموذج قيمة عنصر التحكم أو يعيد ضبطها. خزّن القيمة في حالة مكوّنك حتى يعكسها العرض.

value = 0;

writeValue(value: number): void {
  this.value = value ?? 0;
}

معالجة القيمة الفارغة

قد تتلقى writeValue القيمة null عند إعادة الضبط. طبّعها إلى قيمة افتراضية آمنة حتى لا يتعطل القالب.

writeValue(value: string | null): void {
  this.text = value ?? '';
}

registerOnChange

تمرّر Angular إليك استدعاءً لتشغيله كلما تغيّرت القيمة. احفظه، إذ ستستدعيه عند تفاعل المستخدم.

private onChange: (v: number) => void = () => {};

registerOnChange(fn: (v: number) => void): void {
  this.onChange = fn;
}

إصدار التغييرات

عند تفاعل المستخدم، حدّث الحالة الداخلية واستدعِ الاستدعاء المحفوظ onChange بالقيمة الجديدة لتحديث نموذج النموذج.

select(rating: number): void {
  this.value = rating;
  this.onChange(rating);
}

توصيل القالب

يعرض القالب الحالة الحالية ويشغّل معالجك عند إجراءات المستخدم، ثم يستدعي المعالج onChange.

template: '<button *ngFor="let s of stars" (click)="select(s)" [class.on]="s <= value">star</button>'

الحفاظ على تزامن العرض

بما أن writeValue تحدّث الحالة الداخلية ويرتبط القالب بها، تنعكس تغييرات النموذج البرمجية (مثل patchValue) فورًا في مكوّنك.

متوافق مع OnPush

مع اكتشاف تغييرات OnPush، حدّث الحالة عبر حقول المكوّن ودَع الارتباطات تتفاعل. وإذا عدّلت الحالة من مصادر غير متزامنة، فاطلب التحقق أو استخدم signals للحفاظ على حداثة العرض.

لا تستدعِ onChange داخل writeValue

مهم: لا تستدعِ onChange مطلقًا من داخل writeValue. فهذا سيعيد التحديثات البرمجية إلى النموذج وقد يسبب حلقات لا نهائية. ويُستخدم onChange للتغييرات التي يقودها المستخدم فقط.

كتابة القيمة

امنح عنصر التحكم نوع قيمة محددًا (رقم أو سلسلة نصية أو واجهة مخصّصة)، وحدّد أنواع الأساليب وفقًا لذلك لضمان تكامل أكثر أمانًا مع النماذج التفاعلية.

export class RatingComponent implements ControlValueAccessor {
  value = 0;
  writeValue(v: number) { this.value = v ?? 0; }
  registerOnChange(fn: (v: number) => void) { this.onChange = fn; }
}

النتيجة حتى الآن

بعد تنفيذ writeValue وregisterOnChange، أصبح عنصر التحكم يقرأ من نموذج النموذج ويكتب إليه. بعد ذلك، ستضيف التعامل مع حالتي التعطيل والتفاعل لإكمال تجربة المستخدم.

تحقق سريع

اختبر معرفتك بكتابة القيم.

مراجعة

نفّذت writeValue (من النموذج إلى العرض، مع التعامل مع القيمة null)، واستخدمت استدعاء registerOnChange لإرسال تغييرات المستخدم (من العرض إلى النموذج)، وربطت القالب، وتعلمت ألّا تستدعي onChange من داخل writeValue.

الأسئلة الشائعة

هل درس «كتابة القيم وتسجيلها» مجاني؟

نعم — نص درس «كتابة القيم وتسجيلها» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.

ماذا ستتعلم في «كتابة القيم وتسجيلها»؟

نفّذ writeValue وعمليات استدعاء التغيير تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟

لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «كتابة القيم وتسجيلها»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟

نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Angular Academy