أساسيات ربط البيانات

ربط البياناتData Bindingأساسيات القوالبAngular 22.1

جدول مرجعي سريع

نوع الربط	اتجاه تدفق البيانات	الهدف الأساسي والاستخدام
الربط النصي	من المكون إلى القالب (One-Way)	عرض قيمة المتغيرات داخل النصوص باستخدام الأقواس المزدوجة
ربط الخصائص	من المكون إلى القالب (One-Way)	التحكم الديناميكي في سمات عناصر HTML مثل disabled أو src
ربط الأحداث	من القالب إلى المكون (One-Way)	الاستجابة الفورية لتفاعلات المستخدم مثل النقرات والإدخال
الربط ثنائي الاتجاه	في الاتجاهين معا (Two-Way)	مزامنة البيانات لحظياً بين حقول الإدخال ومتغيرات المكون

الشرح

نبدأ في هذا الدرس أولى محطات الفصل الخامس حول القوالب والتحكم في التدفق، للتعرف على مفهوم ربط البيانات (Data Binding) في إصدار Angular 22.1. يُعد ربط البيانات العمود الفقري لأي تطبيق أنجولر، فهو الجسر البرمجي المسؤول عن تحقيق التزامن المستمر وتناقل البيانات بسلاسة تامة بين ملفات المكون (TypeScript) وقوالب واجهة المستخدم (HTML). يضمن لك هذا النظام تحديث الواجهة تلقائياً كلما تغيرت حالة البيانات في الخلفية، والعكس صحيح.

تفصيل فلسفة ربط البيانات في أنجولر

الاتجاه الواحد مقابل الاتجاهين:

يعتمد أنجولر بشكل أساسي على تدفق البيانات أحادي الاتجاه (One-Way Data Binding) لضمان سهولة تتبع الأخطاء وفهم مسار البيانات في التطبيق بوضوح تام، مع توفير خيارات محددة للربط ثنائي الاتجاه عندما يتطلب الأمر مزامنة حقول الإدخال مع المتغيرات برمجياً.

فصل المسؤوليات الهندسية:

يتيح لك نظام الربط كتابة قوالب نظيفة وخالية من التعقيد البرمجي، حيث تقتصر مهمة ملف الـ HTML على عرض الحالة القادمة من صنف المكون وتمرير تفاعلات المستخدم إليه لتتم معالجتها داخل الدوال البرمجية.

أمثلة برمجية: تطبيق أساسيات ربط البيانات

المثال الأول: دمج الربط النصي وربط الخصائص الأساسية

typescript

1	import { Component } from '@angular/core';
2
3	@Component({
4	selector: 'app-data-binding-basics',
5	standalone: true,
6	template: `
7	<div class="container">
8	<!-- 1. الربط النصي (Interpolation) لعرض المتغيرات -->
9	<h2>مرحباً بك، {{ username }}</h2>
10	<p>رصيدك الحالي هو: {{ userBalance }} جنيه</p>
11
12	<!-- 2. ربط الخصائص (Property Binding) للتحكم في سمات العناصر -->
13	<button [disabled]="isButtonDisabled">انقر هنا (معطل ديناميكياً)</button>
14	<img [src]="userAvatarUrl" alt="صورة المستخدم الشخصية">
15	</div>
16	`
17	})
18	export class DataBindingBasicsComponent {
19	username = 'أحمد مطر';
20	userBalance = 1500;
21	isButtonDisabled = true;
22	userAvatarUrl = 'https://example.com/avatar.png';
23	}

أمثلة برمجية: الاستجابة للأحداث وتغيير الحالة

المثال الثاني: استخدام ربط الأحداث (Event Binding) لتحديث البيانات

typescript

1	import { Component } from '@angular/core';
2
3	@Component({
4	selector: 'app-event-binding-demo',
5	standalone: true,
6	template: `
7	<div class="action-container">
8	<h3>حالة النظام: {{ systemStatus }}</h3>
9
10	<!-- ربط الحدث (click) لتنفيذ دالة عند الضغط -->
11	<button (click)="toggleSystemStatus()">تغيير حالة النظام</button>
12
13	<!-- التقاط الحدث المدخل من المستخدم وتمرير القيمة -->
14	<input type="text" (input)="onTypeInput($event)" placeholder="اكتب شيئاً هنا...">
15	<p>ما تم كتابته: {{ typedText }}</p>
16	</div>
17	`
18	})
19	export class EventBindingDemoComponent {
20	systemStatus = 'متوقف عن العمل';
21	typedText = '';
22
23	toggleSystemStatus() {
24	if (this.systemStatus === 'متوقف عن العمل') {
25	this.systemStatus = 'يعمل بكفاءة عالية';
26	} else {
27	this.systemStatus = 'متوقف عن العمل';
28	}
29	}
30
31	onTypeInput(event: Event) {
32	const inputElement = event.target as HTMLInputElement;
33	this.typedText = inputElement.value;
34	}
35	}

نصائح احترافية

—افهم جيداً اتجاه تدفق البيانات في تطبيقك ولا تفرط في استخدام الربط ثنائي الاتجاه!
—الاعتماد الواعي على الربط أحادي الاتجاه يمنحك أداءً أعلى وتطبيقات أكثر استقراراً وسهولة في الصيانة واكتشاف الأخطاء، مقارنة بالاعتماد العشوائي على الربط ثنائي الاتجاه الذي قد يصعب تتبع مصدر تغيير البيانات فيه.

الدرس السابق

مقدمة إلى دورة حياة المكونات وأهمية ngOnInit

الدرس التالي

الربط النصي لعرض البيانات

نوع الربط

اتجاه تدفق البيانات

الهدف الأساسي والاستخدام

الربط النصي

من المكون إلى القالب (One-Way)

عرض قيمة المتغيرات داخل النصوص باستخدام الأقواس المزدوجة

ربط الخصائص

من المكون إلى القالب (One-Way)

التحكم الديناميكي في سمات عناصر HTML مثل disabled أو src

ربط الأحداث

من القالب إلى المكون (One-Way)

الاستجابة الفورية لتفاعلات المستخدم مثل النقرات والإدخال

الربط ثنائي الاتجاه

في الاتجاهين معا (Two-Way)

مزامنة البيانات لحظياً بين حقول الإدخال ومتغيرات المكون

تفصيل فلسفة ربط البيانات في أنجولر

الاتجاه الواحد مقابل الاتجاهين:

فصل المسؤوليات الهندسية:

أمثلة برمجية: تطبيق أساسيات ربط البيانات

المثال الأول: دمج الربط النصي وربط الخصائص الأساسية

typescript

1	import { Component } from '@angular/core';
2
3	@Component({
4	selector: 'app-data-binding-basics',
5	standalone: true,
6	template: `
7	<div class="container">
8	<!-- 1. الربط النصي (Interpolation) لعرض المتغيرات -->
9	<h2>مرحباً بك، {{ username }}</h2>
10	<p>رصيدك الحالي هو: {{ userBalance }} جنيه</p>
11
12	<!-- 2. ربط الخصائص (Property Binding) للتحكم في سمات العناصر -->
13	<button [disabled]="isButtonDisabled">انقر هنا (معطل ديناميكياً)</button>
14	<img [src]="userAvatarUrl" alt="صورة المستخدم الشخصية">
15	</div>
16	`
17	})
18	export class DataBindingBasicsComponent {
19	username = 'أحمد مطر';
20	userBalance = 1500;
21	isButtonDisabled = true;
22	userAvatarUrl = 'https://example.com/avatar.png';
23	}

أمثلة برمجية: الاستجابة للأحداث وتغيير الحالة

المثال الثاني: استخدام ربط الأحداث (Event Binding) لتحديث البيانات

typescript

1	import { Component } from '@angular/core';
2
3	@Component({
4	selector: 'app-event-binding-demo',
5	standalone: true,
6	template: `
7	<div class="action-container">
8	<h3>حالة النظام: {{ systemStatus }}</h3>
9
10	<!-- ربط الحدث (click) لتنفيذ دالة عند الضغط -->
11	<button (click)="toggleSystemStatus()">تغيير حالة النظام</button>
12
13	<!-- التقاط الحدث المدخل من المستخدم وتمرير القيمة -->
14	<input type="text" (input)="onTypeInput($event)" placeholder="اكتب شيئاً هنا...">
15	<p>ما تم كتابته: {{ typedText }}</p>
16	</div>
17	`
18	})
19	export class EventBindingDemoComponent {
20	systemStatus = 'متوقف عن العمل';
21	typedText = '';
22
23	toggleSystemStatus() {
24	if (this.systemStatus === 'متوقف عن العمل') {
25	this.systemStatus = 'يعمل بكفاءة عالية';
26	} else {
27	this.systemStatus = 'متوقف عن العمل';
28	}
29	}
30
31	onTypeInput(event: Event) {
32	const inputElement = event.target as HTMLInputElement;
33	this.typedText = inputElement.value;
34	}
35	}