36. المعلمات الاختيارية ومعلمات الاستعلام (Query Parameters)

بالإضافة إلى معلمات المسار المطلوبة (على سبيل المثال، /user/:id)، يدعم توجيه Angular طريقتين للتعامل مع البيانات الاختيارية التي يتم تمريرها عبر عنوان URL: معلمات المصفوفة الاختيارية (Optional Matrix Parameters) ومعلمات الاستعلام (Query Parameters).

1. معلمات المصفوفة الاختيارية (Optional Matrix Parameters)

هذه مفيدة لتمرير التهيئة إلى جزء مسار محدد (على سبيل المثال، /products;filter=sale;sort=price).

التنقل

typescript // تمرير معلمات المصفوفة عبر كائن في مصفوفة المسار this.router.navigate(['/products', { filter: 'sale', sort: 'price' }]);

الوصول

يتم الوصول إلى معلمات المصفوفة عبر paramMap في ActivatedRoute، تماماً مثل المعلمات المطلوبة.

typescript const filter = this.route.snapshot.paramMap.get('filter'); // 'sale'

2. معلمات الاستعلام (Query Parameters)

تُستخدم معلمات الاستعلام (على سبيل المثال، /search?q=angular&page=2) عادةً للتصفية أو الفرز أو ترقيم الصفحات، حيث تنطبق عالمياً على المسار وأطفاله.

التنقل

يتم تمرير معلمات الاستعلام باستخدام كائن queryParams في خيارات التنقل.

typescript this.router.navigate(['/search'], { queryParams: { q: 'angular', page: 2 } });

الوصول

يتم الوصول إلى معلمات الاستعلام عبر queryParamMap Observable لـ ActivatedRoute.

typescript // component.ts ngOnInit(): void { this.route.queryParamMap.subscribe(params => { const query = params.get('q'); const page = params.get('page'); console.log(Search for '${query}' on page ${page}); }); }

ملاحظة: تُفضل معلمات الاستعلام (عبر queryParamMap) بشدة على معلمات المصفوفة لأنها أبسط في الإدارة وأكثر تقليدية لوظائف البحث/التصفية.