35. الوصول إلى مُعلمات المسار

تتطلب المسارات الديناميكية معلمات (على سبيل المثال، /user/10، حيث 10 هي المعلمة). يوفر Angular خدمة ActivatedRoute للوصول إلى هذه المعلمات.

1. تحديد مسار مُعلَّم

استخدم النقطتين الرأسيتين (:) متبوعتين باسم المعلمة.

typescript const routes: Routes = [ { path: 'user/:id', component: UserDetailComponent } ];

2. الوصول إلى المعلمات: Snapshot (بيانات ثابتة)

إذا كان مضموناً تدمير المكون وإعادة إنشائه كلما تغير المسار (على سبيل المثال، التنقل من /user/1 إلى /about)، فإن snapshot كافٍ.

typescript import { ActivatedRoute } from '@angular/router';

export class UserDetailComponent implements OnInit { userId: string | null = null;

constructor(private route: ActivatedRoute) { }

ngOnInit(): void { // يقرأ المعلمة على الفور عند التهيئة this.userId = this.route.snapshot.paramMap.get('id'); // جلب بيانات المستخدم باستخدام this.userId } }

3. الوصول إلى المعلمات: Observable (بيانات تفاعلية)

إذا تنقل المستخدم بين المسارات التي تستخدم نفس المكون (على سبيل المثال، /user/1 إلى /user/2)، فسيتم إعادة استخدام مثيل المكون، ولن يتم تشغيل ngOnInit مرة أخرى. في هذه الحالة، يجب علينا الاشتراك في paramMap Observable للتفاعل مع التغييرات.

typescript // ... في UserDetailComponent

ngOnInit(): void { this.route.paramMap.subscribe(params => { this.userId = params.get('id'); console.log('New User ID:', this.userId); // إعادة جلب البيانات هنا في كل مرة يتغير فيها المعرّف }); }

أفضل الممارسات: استخدم دائماً نهج Observable لمعلمات المسار ما لم تكن متأكداً أن المكون لن ينتقل إلى نفسه أبداً.