كيفية كتابة عناصر تحكم النموذج المخصص في الزاوي

نحن جميعا نحب روابط البيانات في الاتجاه الصحيح؟ نحن نحب عندما نضيف توجيه "NgModel" إلى بعض المدخلات ومزامنة جميع التغييرات القيمة. إنها ميزة رائعة حقًا. لكن الأمور أصبحت مثيرة للاهتمام عندما نريد إضافة هذه الوظيفة إلى المكون المخصص لدينا ، على سبيل المثال ، مكون مثل هذا

لذلك لدينا زران ، وعندما نضغط زائد فإنه يزيد بمقدار واحد ، وعندما نضغط ناقص فإنه يتناقص بواحد. نريد استخدام هذا المكون في جميع أنحاء المكان ونريد إضافة ngModel على هذا المكون ، حتى نتمكن من تعيين القيمة من الوضع وإذا نقر المستخدم على أي زر قام بتحديثه وفقًا للطراز.

قالب المكون لدينا يشبه هذا

حسنًا ، دعنا نحاول استخدام هذا المكون في أي مكان وإضافة ngModel إليه.

   
تحديث أموالك    

حسنًا ، نركض ، ونحصل على هذا الخطأ

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

   
تحديث أموالك    

إذا قمنا بتشغيله ، فسنحصل على النتيجة التالية

حسنا والآن نحن ضائعون. "لا يوجد مُدخل للقيمة للتحكم بالنموذج بالاسم:" النقد "، ليس أكثر بساطة من السابق.

عندما نملأ ذلك ، لا يوجد شيء صعب ، لكن قبل أن أشرح لك كيفية إصلاح هذا الخطأ ، اسمح لي أن أوضح لك كيف تعمل الزوايا / النماذج تحت الغطاء وسبب حاجتها إلى أداة الوصول إلى القيمة هذه.

التحكم في قيمة الملحقات

كل إدخال html أصلي تستخدمه داخل الزاوي (إدخال ، textarea ، حدد ، مربع اختيار) ، يستخدم التوجيه الذي ينفذ واجهة التحكم في القيمة Accessor تحت غطاء محرك السيارة للعمل مع ngModel ، وهذا يعني أن هذا التوجيه هو المسؤول عن كتابة البيانات من نموذج لعرض و بالعكس ، لذلك كلما استخدمت أبسط إدخال مثل هذا ،

الزاوي يضيف التوجيه إلى هذا الإدخال تحت الغطاء. عندما تكون التحديثات قادمة من النموذج ، يقول ngModel إن أداة الوصول إلى قيمة التحكم في hay هي القيمة الجديدة من النموذج ، احصل عليها ... يقوم Control Value Accessor بتحديث طريقة العرض وكلما غيّر المستخدم شيئًا ، يقول Control Value Accessor لـ ngModel ، هذه هي القيمة الجديدة من المستخدم.

من أجل البساطة ، سأوضح لك كيف تضيف الزاوي فعليًا التوجيه ، لذلك لا تخمين أي شيء يذهب إلى السحر.

شفرة المصدر الزاوي (في الحقيقة لقد حذفت التعليقات لتقليص الغرض)

اسمحوا لي أن امسح هذا الأمر ، في كل مرة ترى الزاوي المدخلات التي هي نوع الرقم وأيضا سمة ngModel معها ، ويضيف هذا التوجيه إلى هذا الإدخال. ينفذ هذا التوجيه واجهة ControlValueAccessor ، التي لديها 4 طرق للتنفيذ

  • WriteValue
  • RegisterOnChange
  • RegisterOnTouched
  • SetDisabledState

وأهمها هي WriteValue ، RegisterOnChange

  • WriteValue

يتم استدعاء هذه الطريقة كلما تم تغيير القيمة في الخارج ، على سبيل المثال قمنا بتغيير المبلغ النقدي إلى 5 من app.component ، ثم يتم استدعاء هذه الطريقة ولديها 5 قيمة كمعلمة ويتم تحديث هذا التوجيه قيمة إدخال وفقا لذلك.

  • RegisterOnChange

تبدو معقدة بعض الشيء ، لكنها بسيطة مثل WriteValue. يتم استدعاء وظيفة RegisterOnChange مرة واحدة في التهيئة ويجب عليك فقط حفظ الوظيفة المرجعية والمرتقبة ، لذلك كلما تغيرت القيمة من طريقة العرض ، تقوم باستدعاء هذه الوظيفة لتمرير قيمة جديدة إليها وسيتم تحديث ngModel وفقًا لذلك.

بقدر علمنا بإضافة ngModel إلى المكون المخصص لدينا ، يتعين علينا تطبيق ControlValueAccessor. آخر شيء يتعين علينا القيام به هو إضافة هذا المكون إلى مجموعة موفري "NG_VALUE_ACCESSOR". هذا لأنه كلما تمت تهيئة توجيه ngModel ، فإنه يستخدم مجموعة موفري NG_VALUE_ACCESSOR لجلب أداة الوصول إلى القيمة الحالية التي يعمل عليها ، ومنشئ ngModel الحالي

تتم إضافة التوجيه إلى NG_VALUE_ACCESSOR مثل هذا

تحكم نموذج مخصص

في النهاية ، لنقم بإنشاء عنصر تحكم مخصص للنموذج

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