تمرير وقراءة معاملات المسار والمتغيرات الديناميكية

Route ParametersDynamic SegmentsComponent Input BindingActivatedRoute,

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

طريقة القراءة (`Extraction Method`)	آلية التنفيذ المعمارية	مستوى السهولة والنظافة البرمجية
باستخدام خدمة `ActivatedRoute`	حقن الخدمة والاشتراك في تدفق `route.params`	طريقة كلاسيكية تتطلب إدارة اشتراكات
عبر ربط المدخلات (`Component Input Binding`)	استقبال المعامل مباشرة كمتغير مع `@Input()`	طريقة حديثة، نظيفة، وتلغي الحاجة للتعامل مع التدفقات يدوياً

الشرح

في كثير من الأحيان، تحتاج التطبيقات إلى تمرير قيم ديناميكية ضمن رابط الـ URL (مثل معرف المستخدم id: 5 لعرض تفاصيل حسابه). يتيح لك أنجولر إمكانية تعريف قطاعات ديناميكية في المسارات (Dynamic Segments) وقراءتها بكل سهولة باستخدام إما خدمة ActivatedRoute التقليدية أو ميزة ربط المدخلات الحديثة في المكونات.

تفصيل فلسفة وعمل المعاملات الديناميكية

تعريف القطاعات الديناميكية:

يتم إضافة نقطتين رأسيتين قبل اسم المعامل في ملف المسارات (مثل /users/:id) ليقوم النظام بالتعرف عليه كمتغير قابل للتغيير.

الاستفادة من المدخلات المباشرة:

بفضل تفعيل ميزة withComponentInputBinding(), تحول المعاملات تلقائياً إلى متغيرات داخل المكون دون الحاجة لأكواد معقدة.

أمثلة برمجية موسعة: تعريف المعاملات وقراءتها

المثال الأول: تحديد المسار الديناميكي في ملف المسارات (app.routes.ts)

typescript

1	import { Routes } from '@angular/core';
2	import { UserDetailComponent } from './user-detail.component';
3
4	export const routes: Routes = [
5	{
6	path: 'user/:id',
7	component: UserDetailComponent
8	}
9	];

⚠️ تحذير

تذكر أن تطابق اسم المتغير المُعرّف بـ @Input() مع اسم المعامل الموجود في المسار (:id) شرط أساسي لنجاح النقل التلقائي! إذا اختلف الاسم، فلن تتمكن الإطار البرمجي من ربط القيمة بالشكل الصحيح.

المثال الثاني: استقبال المعامل ديناميكياً داخل المكون (user-detail.component.ts)

typescript

1	import { Component, Input } from '@angular/core';
2	import { CommonModule } from '@angular/common';
3
4	@Component({
5	selector: 'app-user-detail',
6	standalone: true,
7	imports: [CommonModule],
8	template: `
9	<div class="card">
10	<h3>صفحة تفاصيل المستخدم الشخصية</h3>
11	<p><strong>معرف المستخدم المستلم من المسار:</strong> {{ id }}</p>
12	</div>
13	`,
14	styles: [`
15	.card { background: #090d16; color: #fff; padding: 24px; border-radius: 8px; border: 1px solid #1e293b; }
16	p { color: #38bdf8; font-size: 1.1rem; }
17	`]
18	})
19	export class UserDetailComponent {
20	// استقبال المعامل مباشرة بفضل ميزة withComponentInputBinding
21	@Input() id!: string;
22	}

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

—استفد دائماً من ربط المدخلات (Component Input Binding) لقراءة معاملات المسار!
—هذه الطريقة تختصر الكثير من الأكواد وتلغي الحاجة المزعجة لحقن ActivatedRoute وعمل اشتراكات يدوية داخل دالة ngOnInit.

الدرس السابق

التنقل البرمجي واستخدام الأزرار وروابط التنقل مع Router و routerLink

الدرس التالي

قراءة معاملات الاستعلام ومصفوفات التمرير عبر ActivatedRoute

طريقة القراءة (`Extraction Method`)

آلية التنفيذ المعمارية

مستوى السهولة والنظافة البرمجية

باستخدام خدمة `ActivatedRoute`

حقن الخدمة والاشتراك في تدفق `route.params`

طريقة كلاسيكية تتطلب إدارة اشتراكات

عبر ربط المدخلات (`Component Input Binding`)

استقبال المعامل مباشرة كمتغير مع `@Input()`

طريقة حديثة، نظيفة، وتلغي الحاجة للتعامل مع التدفقات يدوياً

تفصيل فلسفة وعمل المعاملات الديناميكية

تعريف القطاعات الديناميكية:

الاستفادة من المدخلات المباشرة:

بفضل تفعيل ميزة withComponentInputBinding(), تحول المعاملات تلقائياً إلى متغيرات داخل المكون دون الحاجة لأكواد معقدة.

أمثلة برمجية موسعة: تعريف المعاملات وقراءتها

المثال الأول: تحديد المسار الديناميكي في ملف المسارات (app.routes.ts)

typescript

1	import { Routes } from '@angular/core';
2	import { UserDetailComponent } from './user-detail.component';
3
4	export const routes: Routes = [
5	{
6	path: 'user/:id',
7	component: UserDetailComponent
8	}
9	];

⚠️ تحذير

المثال الثاني: استقبال المعامل ديناميكياً داخل المكون (user-detail.component.ts)

typescript

1	import { Component, Input } from '@angular/core';
2	import { CommonModule } from '@angular/common';
3
4	@Component({
5	selector: 'app-user-detail',
6	standalone: true,
7	imports: [CommonModule],
8	template: `
9	<div class="card">
10	<h3>صفحة تفاصيل المستخدم الشخصية</h3>
11	<p><strong>معرف المستخدم المستلم من المسار:</strong> {{ id }}</p>
12	</div>
13	`,
14	styles: [`
15	.card { background: #090d16; color: #fff; padding: 24px; border-radius: 8px; border: 1px solid #1e293b; }
16	p { color: #38bdf8; font-size: 1.1rem; }
17	`]
18	})
19	export class UserDetailComponent {
20	// استقبال المعامل مباشرة بفضل ميزة withComponentInputBinding
21	@Input() id!: string;
22	}