Angular / الأساسي / الدرس 2
القوالب والربط والأحداث
اقرأ القالب كعرض لحالة المكوّن واربط هدف DOM الصحيح واجعل الأحداث انتقالات حالة صريحة.
في هذه الصفحة
أهداف الدرس
- تمييز الاستيفاء وربط الخصائص وربط السمات.
- معالجة الأحداث دون إخفاء قواعد المجال في الوسوم.
- استخدام عناصر دلالية وفهم نطاق تعبير القالب.
تصل الروابط الحالة بـDOM
يدرج الاستيفاء التعبير كنص، ويكتب ربط الخاصية قيمة في DOM أو خاصية مكوّن. يستهدف ربط السمة سمة HTML صراحة ويفيد لكثير من ARIA. لا يساوي نص يشبه المنطق قيمة disabled المنطقية. يقيم Angular التعبيرات بسياق مكوّن محدد لا كسكربت مطلق. أبعد التحويل المكلف والأثر الجانبي عن العرض ليظل متوقعًا مع تكرار فحوصه.
اختبار الانتقال قبل توصيل الزر
يحوي النموذج عدًا وعملية زيادة، ويختبر الاستدعاء الحساب لا وقوع حدث DOM. يربط (click) الحدث بعملية الصنف. استخدم زرًا أصليًا بدل نقر عنصر غير تفاعلي. افحص حدود المجال داخل العملية عند الحاجة؛ فتعطيل الزر عرض لا إذن أو فحص خادم. افصل دليل النموذج من اختبار الحدث الفعلي.
export {};
class CounterModel {
count = 0;
increment(): void { this.count += 1; }
}
const model = new CounterModel();
model.increment();
console.log(model.count);
1
تصير القيمة واحدًا بعد استدعاء مباشر، ولا يختبر النموذج إرسال المتصفح أو لوحة المفاتيح أو عرض Angular.
ربط القيم والأحداث بأهدافها المقصودة
يفترض القالب count وlimit وincrement في مالكه. تتلقى disabled تعبيرًا منطقيًا وتتلقى ARIA نصًا بربط السمة. يمنع نوع الزر إرسال نموذج عرضيًا. يعرض الاستيفاء العد، والمتوقع زيادة مع التفعيل وتعطيل عند الحد. لا يستقل القالب دون صنف ومضيف. اختبر التفعيل بلوحة المفاتيح عبر الزر الأصلي أيضًا.
<p>Count: {{ count }}</p>
<button type="button"
[disabled]="count >= limit"
[attr.aria-label]="'Increase count'"
(click)="increment()">
Increase
</button>
عند صفر وحد ثلاثة يُفعّل الزر ويظهر Count: 0. يحتاج التفاعل والعرض الصنف وتجربة متصفح فعلية.
استخراج بيانات الحدث اللازمة فقط
يتاح $event ويتبع نوعه الحدث والهدف؛ وليس هدف Event العام عنصر إدخال محددًا تلقائيًا. فضّل مرجع قالب أو معالجًا محددًا بدل تحويل غير مفحوص. أظهر التحليل والتطبيع؛ فقيمة الإدخال نص حتى بأرقام. يجمع الربط الثنائي القيمة وإشعار التغيير ولا يحل التحقق. تجنب تحديثات غير مرتبطة بتعبير طويل يصعب اختباره وشرحه.
فحص السلوك والمعنى الميسر معًا
لا يثبت النقر سهولة لوحة المفاتيح أو وضوح الاسم. فضّل الدلالة الأصلية والتسمية المرئية والتركيز. اختبر التفعيل والتعطيل والحدود والتكرار وسلوك النموذج. قرر إزالة السمة الاختيارية بـnull بدل نص مضلل. يعامل الاستيفاء HTML غير الموثوقة كنص لا وسوم تنفيذية. تبقى الصلاحيات عند حدودها. أظهر حالة الميزة ولا تخف كل قواعدها بالقالب.
الأخطاء الشائعة وإصلاحها
تتلقى disabled نصًا بدل منطق.
- لماذا يحدث؟
- استُخدم استيفاء نصي لعقد خاصية.
- كيف تصلحه؟
- اربط التعبير المنطقي بصياغة الخاصية.
- كيف تتجنب تكراره؟
- افحص نوع الهدف قبل الصياغة.
يرسل زر إجراء النموذج المحيط.
- لماذا يحدث؟
- لم يُحدد نوع الزر الأصلي.
- كيف تصلحه؟
- استخدم type="button" لغير الإرسال.
- كيف تتجنب تكراره؟
- اختبر العناصر ضمن نموذجها الحقيقي.
يفترض المعالج أن كل هدف إدخال نص.
- لماذا يحدث؟
- حُوّل نوع الحدث العام بدل فحصه أو تنظيمه.
- كيف تصلحه؟
- استخدم مرجع قالب أو حد معالج صحيح النوع.
- كيف تتجنب تكراره؟
- افصل استخراج الحدث من تحليل المجال.
اختبر فهمك
1. أضف حد ثلاثة وارفض الزيادة عنده. ما النتيجة بعد خمس دعوات ولماذا لا يكفي تعطيل القالب؟
اعرض الحل المشروح
افحص count < limit داخل العملية قبل التغيير، فتترك خمس دعوات القيمة ثلاثة. يوجه تعطيل الزر التفاعل ولا يمنع استدعاء مباشرًا أو مكوّنًا آخر أو طلب خادم. اختبر الحد مستقلًا وتطابق disabled في اختبار المكوّن.
2. يحوي إدخال "12" وتُمرّر قيمته لعملية عددية. صف الخطوة الناقصة واختبارًا سلبيًا.
اعرض الحل المشروح
حلل النص بتنسيق مقبول وافحص الصحيح والمجال. ارفض "12x" إذا لزم عدد كامل. لا تحول معلمة number نص المتصفح ولا تبرر التأكيد بأن الهدف قدم بيانات صالحة.
أهم ما تعلمته
- اختر الربط وفق عقد الهدف.
- عامل الأحداث كانتقالات صريحة.
- اختبر الدلالة الأصلية وقواعد المجال منفصلتين.