مراجعة ربط الخصائص والأحداث
اربطوا البيانات بالمكوّنات والأحداث الصادرة منها
مراجعة ربط الخصائص والأحداث درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.
اتجاهان لتدفّق البيانات
تنقل قوالب Angular البيانات في اتجاهين: إذ تدفع ربط الخاصية البيانات إلى DOM، بينما يرسل ربط الأحداث إجراءات المستخدم مرة أخرى إلى المكوّن.
الاستيفاء
يعرض الاستيفاء باستخدام القوسين المعقوفين المزدوجين قيمةً من المكوّن كنص. وهو أحادي الاتجاه، من المكوّن إلى العرض.
<p>{{ title }}</p>
// component
title = "Dashboard";صيغة ربط الخاصية
تربط الأقواس المربعة قيمةً من المكوّن بخاصية عنصر أو مكوّن. ويُقيَّم التعبير الموجود على اليمين ثم تُسنَد نتيجته.
<img [src]="imageUrl" [alt]="caption">
// component
imageUrl = "/logo.png";
caption = "Logo";الربط بمدخلات المكوّن
يُمرِّر ربط الخاصية القيم أيضًا إلى خصائص @Input في المكوّن الابن.
<app-user [name]="userName"></app-user>
// parent component
userName = "Ada";الخاصية في مقابل السمة
يستهدف ربط الخاصية خصائص DOM، وليس سمات HTML. وللتعامل مع السمات فقط، استخدم البادئة attr..
<button [attr.aria-label]="label">Save</button>صيغة ربط الأحداث
تربط الأقواس حدثًا من DOM بطريقة في المكوّن. وتُنفَّذ الطريقة عند وقوع الحدث.
<button (click)="save()">Save</button>
// component
save() { console.log("saved"); }كائن $event
يحمل المتغير الخاص $event بيانات الحدث إلى معالجك.
<input (input)="onInput($event)">
// component
onInput(e: Event) {
this.text = (e.target as HTMLInputElement).value;
}الربط بمخرجات المكوّن
يستمع ربط الأحداث أيضًا إلى أحداث @Output الصادرة عن المكوّن الابن عبر EventEmitter.
<app-counter (changed)="onChange($event)"></app-counter>
// parent
onChange(value: number) { this.count = value; }دمج نوعَي الربط
يمثّل استخدام ربط الخاصية وربط الحدث مع الخاصية نفسها أساس الربط ثنائي الاتجاه، الذي ستتعرّف إليه لاحقًا.
<input [value]="name" (input)="name = $event.target.value">روابط الفئات والأنماط
تبدّل روابط الخصائص الخاصة الفئات والأنماط استنادًا إلى حالة المكوّن.
<div [class.active]="isActive"
[style.color]="textColor">
Item
</div>الحفاظ على تصريحية القوالب
تحافظ الروابط على العلاقة بين البيانات والعرض بصيغة تصريحية. ويحدّث Angular DOM تلقائيًا عند تغيّر القيم المرتبطة.
تحقّق سريع
اختبر مدى فهمك لربط الخاصية وربط الأحداث.
مراجعة
يدفع ربط الخاصية [prop] البيانات إلى العرض، ويرسل ربط الحدث (event) الإجراءات مرة أخرى، بينما يعرض الاستيفاء النص. ويؤدي الجمع بين ربط الخاصية وربط الحدث للقيمة نفسها إلى إعداد ربط ثنائي الاتجاه.
الأسئلة الشائعة
هل درس «مراجعة ربط الخصائص والأحداث» مجاني؟
نعم — نص درس «مراجعة ربط الخصائص والأحداث» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.
ماذا ستتعلم في «مراجعة ربط الخصائص والأحداث»؟
اربطوا البيانات بالمكوّنات والأحداث الصادرة منها تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟
لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «مراجعة ربط الخصائص والأحداث»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟
نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- مراجعة ربط الخصائص والأحداث
- الربط ثنائي الاتجاه باستخدام ngModel
- مدخلات الإشارات model()
- خصائص مخصّصة قابلة للربط ثنائي الاتجاه