ربط البيانات يربط فئة المكون بقالبه. 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 يستخدم أحد هذه الأنواع.
مكتبة من أسئلة مقابلات تقنية المعلومات مع إجابات مفصّلة — من المبتدئ إلى المتقدم.
تبرع