Angular
تسمح لك بإضافة معلمات اختيارية أو كما تسمى Query parameters
عبر أي رابط Route
, وهي التي تكون بعد علامة اﻹستفهام في الرابط, مثل: /product/:id
.
اﻷن سنرى كيف نضيف هذه Query parameters
و قرائتها وأيضا كيفية التعامل معها من خلال Component
.
استعلامات عبر Router.navigate:
إذا كنت تنتقل عبر الروابط عن طريق الدالة Router.navigate
, هنا نقوم بإضافة Query parameters
بهذه الطريقة:
goProducts() {
this.router.navigate(['/products'], {
queryParams: {
price: 'cheap'
}
});
}
سينتج لنا رابط كهذا:
http://localhost:4200/products?price=cheap
أيضا يمكننا تمرير العديد من اﻹستعلامات Query parameters
هكذا:
goProducts() {
this.router.navigate(['/products'], {
queryParams: {
price: 'cheap',
order: 'alphabetic'
}
});
}
وستكون النتيجة هكذا:
http://localhost:4200/products?price=cheap&order=alphabetic
الخاصية queryParamsHandling:
في العادة عندما ننتقل إلى أي رابط أخر نفقد اﻹستعلامات التي لدينا في الصفحة الحالية, لكن ماذا لو كنا نريد اﻹنتقال إلى رابط أخر ومع اﻹستعلامات التي لدينا دون فقدانها أو ندمجها مع استعلامات جديدة؟
في هذه الحالة سنقوم باستعمال الخاصية : queryParamsHandling
وتأخد قيمة نصية إما merge
أو preserve
.
merge
: تعني دمج اﻹستعلامات الحالية مع استعلامات جديدة.preserve
: تعني اﻹحتفاظ باﻹستعلامات الحالية فقط.
goUsers() {
this.router.navigate(['/users'], {
queryParamsHandling: 'preserve'
});
}
يمكننا استعمال merge
بدلا من preserve
إذا أردنا دمج اﻹستعلامات الحالية مع استعلامات جديدة على الرابط users
:
goUsers() {
this.router.navigate(['/users'], {
queryParamsHandling: 'merge',
queryParams: {
name: 'ab9or',
}
});
}
ستكون النتيجة هي:
http://localhost:4200/users?price=cheap&order=alphabetic&name=ab9or
في الماضي كنا نحتفظ باﻹستعلامات عن طريق الخاصية
AngularpreserveQueryParams
نعطيها القيمةtrue
, لكن ابتدائا من نسخةAngular 4
وما فوق تم إهمال هذه الخاصية وتم استبدالها بالخاصيةqueryParamsHandling
.
استعلامات عبر RouterLink:
إذا كنت تستخدم الميزة RouterLink
في التنقل بين الروابط, هنا نقوم بإضافة Query parameters
بهذه الطريقة:
<a [routerLink]="['/products']" [queryParams]="{price: 'cheap'}">
Products
</a>
وإذا كنت تريد اﻹحتفاظ باﻹستعلامات أو دمجها مع استعلامات الحالية, نضيف الخاصية queryParamsHandling
بهذه الطريقة:
<a [routerLink]="['/users']" [queryParams]="{ name: 'ab9or' }" queryParamsHandling="merge">
Users
</a>
قراءة اﻹستعلامات Query parameters:
اﻷن تعلمنا كيف نقوم بإضافة استعلامات على الرابط, اﻷن سنرى كيف نقرأ قيم تلك اﻹستعلامات.
في هذا الجزء سنستعمل الكلاس ActivatedRoute
, هذا الكلاس لديه دالة اسمها queryParams
, هذه الدالة هي المسؤلة عن قرائة اﻹستعلامات الرابط الحالي, وهي من نوع Observable
يعني سنضيف لها الدالة subscribe
.
على سبيل المثال سنحاول قراءة جميع استعلامات هذا الرابط:
http://localhost:4200/products?price=cheap&order=alphabetic
اﻷن سنقرأ قيمة اﻹستعلام price
و order
:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-products',
templateUrl: './products.component.html',
styleUrls: ['./products.component.scss']
})
export class ProductsComponent implements OnInit {
priceQuery: string;
orderQuery: string;
constructor(private activatedRoute: ActivatedRoute) { }
ngOnInit(): void {
this.activatedRoute.queryParams.subscribe(params => {
this.priceQuery = params.price; // لﻹستعلام price=cheap
this.orderQuery = params.order; // order=alphabetic لﻹستعلام
console.log(this.priceQuery); // للطباعة قيمة ﻹستعلام price في كونسول المتصفح
console.log(this.orderQuery); // للطباعة قيمة ﻹستعلام order في كونسول المتصفح
});
}
}