مقدمة
عند بناء التطبيقات، قد تكون هناك سيناريوهات نريد فيها تمرير بعض الوسائط أو المعلمات لوصف سلوك المسار. في Angular، وتسمى هذه معلمات الاستعلام، وهي اختيارية. يجب عدم الخلط بين معلمات الاستعلام ومعلمات المسار العادية التي تعد معلمات مطلوبة ومرتبطة بمسار واحد فقط.
لتوضيح الفرق بين معلمات المسار ومعلمات الاستعلام، تخيل أنك تقوم ببناء تطبيق يخزن المنتجات. يمكن أن يكون لديك مسار يفتح أي منتج معين باستخدام product_id. يمكنك أيضًا تحديد معلمة استعلام: read_only. عندما يتم تعيين read_only على true، يمكن للمستخدم فقط عرض السجل، بينما عندما يكون read_only هو false، يمكن للمستخدم أيضًا تعديل السجل. بهذه الطريقة وباستخدام مسار واحد فقط، يمكن التعامل مع حالتي الاستخدام: التعديل والعرض. هنا product_id هو معلمة المسار و read_only الاختياري هو معلمة الاستعلام.
المتطلبات الأساسية
لفهم هذه المقالة تمامًا، يلزم الإلمام ببناء التطبيقات باستخدام Angular. سيكون من المفيد أيضًا وجود خبرة في Angular Router و RouterLink و ActivatedRoute.
تمرير معلمات الاستعلام باستخدام Router.navigate
إذا كنت تستخدم Router.navigate للتنقل عبر المسارات، استخدم queryParams لإرسال معلمات الاستعلام.
في المثال أعلاه، إذا أردنا أن يرى الزوار قائمة المنتجات مرتبة حسب الشعبية، فسنستخدم الكود أدناه:
|
1 2 3 4 5 6 |
navigateToProducts() { this.router.navigate( ['/products'], { queryParams: { order: 'popular' } } ); } |
باستخدام هذا الكود، سيصبح عنوان URL:
|
1 |
http://localhost:4200/products?order=popular |
ومع ذلك، قد تكون هناك سيناريوهات نحتاج فيها إلى تمرير معلمات متعددة عند التنقل. على سبيل المثال، إذا أردنا ترتيب المنتجات حسب الشعبية وأيضًا حسب السعر، فيمكننا استخدام الكود أدناه:
|
1 2 3 4 5 6 |
navigateToProducts() { this.router.navigate( ['/products'], { queryParams: { order: 'popular', price: 'high-to-low' } } ); } |
هذه المرة سيصبح عنوان URL كالتالي:
|
1 |
http://localhost:4200/products?order=popular&price=high-to-low |
يلخص هذا كيفية تعيين معلمات الاستعلام باستخدام queryParams.
منع فقدان معلمات الاستعلام باستخدام queryParamsHandling
عند التنقل بين المسارات، تميل المعلمات إلى الضياع. لنفترض أننا مررنا وسيطًا arg0 فلن يتم تمريره عند حدوث توجيه لاحق. يمكننا حفظ المعلمات باستخدام queryParamsHandling وتعيين القيمة على preserve أو merge.
في المثال أعلاه، لنفترض أننا نريد توجيه الزوار إلى صفحة brands من صفحة product مع معلمة المسار { order: 'popular' }، مع الاحتفاظ بمعلمات المسار. للقيام بذلك، يمكننا استخدام queryParamsHandling وتعيينه على preserve :
|
1 2 3 4 5 6 |
navigateToBrand() { this.router.navigate( ['/brand'], { queryParamsHandling: 'preserve' } ); } |
سيجعل هذا عنوان URL يبدو كالتالي:
|
1 |
http://localhost:4200/users?brand=popular |
بعد ذلك، لنفترض أننا نريد الحفاظ على معلمة استعلام المسار السابق { order: 'popular' } مع إضافة معلمات جديدة { price: 'high-to-low' }. يمكننا تعيين queryParamsHandling على merge:
|
1 2 3 4 5 6 7 8 |
navigateToBrand() { this.router.navigate( ['/brand'], { queryParams: { price: 'high-to-low' }, queryParamsHandling: 'merge' } ); } |
باستخدام الكود أعلاه، سيصبح عنوان URL:
|
1 |
http://localhost:4200/brand?order=popular&price=high-to-low |
هنا نختتم الحفاظ على معلمات الاستعلام باستخدام queryParamsHandling للحفظ أو الدمج.
تمرير معلمات الاستعلام باستخدام RouterLink
مع الأخذ في الاعتبار رابطنا السابق، إذا أردنا استخدام RouterLink للتنقل، سنحتاج إلى تمرير معلمات الاستعلام باستخدام queryParams كما هو موضح أدناه:
|
1 2 3 |
<a [routerLink]="['/products']" [queryParams]="{ order: 'popular' }"> المنتجات </a> |
لاحظ كيف نقوم بتمرير الكائن إلى queryParams باستخدام الربط أحادي الاتجاه. يمكننا أيضًا تمرير كائن كامل كـ queryParams .
علاوة على ذلك، إذا أردنا نقل معلمات الاستعلام هذه إلى عمليات التنقل اللاحقة، فيمكننا استخدام خيار queryParamsHandling. الخيارات المتاحة لـ queryParamsHandling هي merge و preserve:
|
1 2 |
<a [routerLink]="['/products']" [queryParams]="{ filter: 'new', order: 'popular' }" queryParamsHandling="merge">المنتجات</a> |
هنا، رأينا كيفية تمرير queryParams ومعالجة المعلمات باستخدام queryParamsHandling في RouterLink.
قراءة قيم معلمات الاستعلام
حتى الآن تعلمنا كيفية تمرير معلمات الاستعلام في المسار. كانت هذه المعلمات اختيارية واستُخدمت لنقل بعض المعلومات إلى الصفحة الوجهة. إرسال المعلمات هو جزء واحد، ولكن من الضروري أيضًا قراءة المعلمات من عنوان URL واستخدامها.
في Angular، نقرأ معلمات استعلام المسار باستخدام فئة ActivatedRoute. تحتوي فئة ActivatedRoute على خاصية قابلة للملاحظة تسمى queryParams للكشف عن معلمات عنوان URL الحالي.
افترض أننا نتعامل مع عنوان URL التالي:
|
1 |
http://localhost:4200/products?order=popular |
للوصول إلى معلمة الاستعلام order في الكود، نستخدم الكود أدناه:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import { ActivatedRoute } from '@angular/router'; import 'rxjs/add/operator/filter'; @Component({ ... }) export class SampleComponent implements OnInit { order: string; constructor(private route: ActivatedRoute) { } ngOnInit() { this.route.queryParams .filter(params => params.order) .subscribe(params => { console.log(params); // { order: "popular" } this.order = params.order; }); } } |
هنا في وحدة التحكم (console)، سنرى قيمة معلمة الاستعلام order وهي “popular” مطبوعة. إذا كان لدينا معلمات استعلام متعددة، فيمكننا استخدام queryParamMap التي ترجع observable paramsMap كائن.
إذا كان لدينا عنوان URL يحتوي على معلمات استعلام متعددة مثل:
|
1 |
http://localhost:4200/products?order=popular&price=high-to-low |
يمكننا الوصول إلى معلمات الاستعلام هذه باستخدام الكود أدناه:
|
1 2 3 4 5 |
this.route.queryParamMap .subscribe((params) => { this.queryObj = { ...params.keys, ...params }; } ); |
باستخدام عامل نشر الكائنات هنا، نحصل على النتيجة أدناه:
|
1 2 3 4 5 6 7 8 |
{ "0": "order", "1": "filter", "params": { "order": "popular", "price": "high-to-low" } } |
أخيرًا، يجب أن تكون قادرًا على فهم كيفية الوصول إلى معلمات الاستعلام من المسارات الناتجة.
الخاتمة
في هذا البرنامج التعليمي، تعرفنا على الفرق بين معلمات الاستعلام ومعلمات المسار. وتعرفنا أيضًا على كيفية تمرير الوسائط عبر المسارات كمعلمات استعلام واسترجاعها مرة أخرى في الصفحة باستخدام queryParams و queryParamsHandling مع Router.navigate و RouterLink. وتعلمنا أيضًا كيفية التعامل مع queryParams و queryParamMap مع ActivatedRoute.
يتطلب Angular لغة Javascript في أساسه. إذا كنت ترغب في زيادة معرفتك بلغة Javascript، يمكنك مراجعة المدونات التالية:
- العمل مع JavaScript: كيف تعمل الفئات
- العمل مع JavaScript: كيف تعمل النماذج الأولية والوراثة
- JavaScript: برنامج تعليمي حول كيفية فهرسة السلاسل النصية وتقسيمها ومعالجتها
حوسبة سعيدة!
التعليقات
لا توجد تعليقات بعد. كن أول من يعلق.