ربط البيانات يربط فئة المكون بقالبه. Angular لديه أربع أشكال، متميزة بـ اتجاه تدفق البيانات وصياغتها المميزة.
1. الاستيفاء — class → view (نص)
html
{{ title }}
{{ price * quantity }}
<img [src]="imageUrl" /> <!-- bind a DOM property -->
<button [disabled]="isLoading">Save</button>
<app-child [user]="currentUser"></app-child> <!-- pass to a component @Input -->
الأقواس المربعة [ ] تربط خاصية بتعبير (في اتجاه واحد، البيانات تتدفق لأسفل داخل العرض).
<button (click)="save()">Save</button> <!-- DOM event → method -->
<input (input)="onInput($event)" /> <!-- $event = the event object -->
<app-child (deleted)="onDeleted($event)"></app-child> <!-- component @Output -->
الأقواس العادية ( ) تستمع للأحداث (في اتجاه واحد، البيانات تتدفق لأعلى من العرض إلى الفئة).
<input [(ngModel)]="name" /> <!-- the "banana in a box" [()] -->
<p>{{ name }}</p> <!-- stays in sync as you type -->
صيغة [(...)] ("الموز في الصندوق") تدمج ربط الخاصية + ربط الحدث للمزامنة ثنائية الاتجاه — غالباً مع ngModel على مدخلات النماذج.
{{ }} → interpolation (class → view, text)
[ ] → property (class → view)
( ) → event (view → class)
[( )] → two-way (both) — it's literally [ ] + ( )
ربط الاتجاهين [()] هو فقط ربط الخاصية [] بالإضافة إلى ربط الحدث () مدمجة — الأقواس توضح الاتجاهات.
ربط البيانات هو كيفية الحفاظ على Angular على الفئة والقالب متزامنين — إنها الآلية وراء كل واجهة مستخدم ديناميكية.
معرفة الأنواع الأربعة وصياغتها ({{}} و [] و () و [()]) والاتجاه الذي يتدفق فيه كل منها أمر ضروري لقراءة وكتابة أي قالب Angular؛ تقريباً كل سطر في قالب Angular يستخدم أحد هذه الأنواع.