Angular – شرح إضافة Query Parameters إلى Router

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

في الماضي كنا نحتفظ باﻹستعلامات عن طريق الخاصية preserveQueryParams نعطيها القيمة true, لكن ابتدائا من نسخة Angular 4 وما فوق تم إهمال هذه الخاصية وتم استبدالها بالخاصية queryParamsHandling.

Angular

استعلامات عبر 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 في كونسول المتصفح
    });
  }

}