العودة إلى الدورة

ربط الخاصية (Property Binding) [ ]

مطور Angular الشامل: من الصفر إلى الاحتراف

11. ربط الخاصية (Property Binding) [ ]

يعمل الاستيفاء فقط لعرض القيم النصية (string) في محتوى النص. يُستخدم ربط الخاصية لتعيين قيمة خاصية عنصر HTML (مثل src، disabled، class) ديناميكياً من خاصية مكون.

الصيغة

يستخدم ربط الخاصية الأقواس المعقوفة ([ ]) حول خاصية عنصر الهدف. القيمة الموجودة داخل علامات الاقتباس هي تعبير TypeScript يحل إلى القيمة المطلوبة.

html <element [property-name]="componentExpression">

مثال: ربط خصائص HTML القياسية

فئة المكون:

typescript export class ImageComponent { imagePath: string = 'assets/logo.png'; altText: string = 'Angular Logo'; isButtonDisabled: boolean = true; }

القالب:

html

<img [src]="imagePath" [alt]="altText">

<button [disabled]="isButtonDisabled">Submit

Accessibility Check

الخاصية مقابل ربط السمة

يفضل Angular الربط بـ الخاصية في DOM، وليس السمة في HTML.

  • السمة (Attribute): مُعرَّفة في HTML (مثل id، type).
  • الخاصية (Property): مُعرَّفة في شجرة DOM (مثل value، disabled).

على سبيل المثال، تحدد سمة HTML value القيمة الأولية، لكن خاصية DOM value تعكس القيمة الحالية (التي تتغير مع كتابة المستخدم). يقوم Angular دائماً بالربط بالخاصية ما لم تستخدم [attr.name] بشكل صريح.