| نوع المعامل الشبكي (`Parameter Type`) | طريقة ظهوره في الرابط (`URL`) | الغرض المعماري الأساسي واستخدامه |
|---|---|---|
| معاملات المسار الأساسية (`Route Params`) | تظهر كقطاعات أساسية مثل `/user/42` | تحديد المورد الأساسي المستهدف بدقة وثبات |
| معاملات الاستعلام (`Query Parameters`) | تظهر بعد علامة الاستفهام مثل `?filter=active&sort=asc` | تمرير خيارات التصفية، البحث، والترتيب الاختيارية |
على عكس معاملات المسار الأساسية، تُستخدم معاملات الاستعلام (Query Parameters) لتمرير بيانات اختيارية أو إضافية عبر الرابط (مثل معاملات التصفية، البحث، أو أرقام الصفحات مثل ?search=angular&page=2). يتم قراءة هذه المعاملات في أنجولر عن طريق حقن خدمة ActivatedRoute والوصول إلى تدفق queryParams.
نظراً لأن معاملات الاستعلام قد تتغير أثناء بقاء المستخدم في نفس المكون، يتم الاعتماد على التدفقات (Observables) لمراقبة التحديثات اللحظية.
تتيح هذه المعاملات إمكانية حفظ حالة البحث والتصفية في رابط المتصفح، مما يسهل مشاركة الصفحة مع نفس النتائج تماماً.
| 1 | import { Component } from '@angular/core'; |
| 2 | import { CommonModule } from '@angular/common'; |
| 3 | import { RouterLink } from '@angular/router'; |
| 4 | |
| 5 | @Component({ |
| 6 | selector: 'app-search-filter', |
| 7 | standalone: true, |
| 8 | imports: [CommonModule, RouterLink], |
| 9 | template: ` |
| 10 | <div class="card"> |
| 11 | <h3>تصفية المنتجات عبر معلمات الاستعلام</h3> |
| 12 | <!-- تمرير معلمات الاستعلام مع الرابط --> |
| 13 | <a [routerLink]="['/products']" [queryParams]="{ category: 'tech', sort: 'price' }" class="filter-btn"> |
| 14 | تصفية منتجات التقنية |
| 15 | </a> |
| 16 | </div> |
| 17 | `, |
| 18 | styles: [` |
| 19 | .card { background: #090d16; color: #fff; padding: 24px; border-radius: 8px; } |
| 20 | .filter-btn { background: #38bdf8; color: #0f172a; padding: 10px 16px; text-decoration: none; font-weight: bold; border-radius: 6px; display: inline-block; } |
| 21 | `] |
| 22 | }) |
| 23 | export class SearchFilterComponent {} |
| 1 | import { Component, OnInit, inject } from '@angular/core'; |
| 2 | import { CommonModule } from '@angular/common'; |
| 3 | import { ActivatedRoute } from '@angular/router'; |
| 4 | |
| 5 | @Component({ |
| 6 | selector: 'app-product-search', |
| 7 | standalone: true, |
| 8 | imports: [CommonModule], |
| 9 | template: ` |
| 10 | <div class="card"> |
| 11 | <h3>نتائج البحث والتصفية</h3> |
| 12 | <p><strong>التصنيف المحدد:</strong> {{ category }}</p> |
| 13 | <p><strong>طريقة الترتيب:</strong> {{ sortOrder }}</p> |
| 14 | </div> |
| 15 | `, |
| 16 | styles: [` |
| 17 | .card { background: #090d16; color: #fff; padding: 24px; border-radius: 8px; border: 1px solid #1e293b; } |
| 18 | p { color: #38bdf8; } |
| 19 | `] |
| 20 | }) |
| 21 | export class ProductSearchComponent implements OnInit { |
| 22 | private route = inject(ActivatedRoute); |
| 23 | category: string = ''; |
| 24 | sortOrder: string = ''; |
| 25 | |
| 26 | ngOnInit(): void { |
| 27 | // الاشتراك في تدفق معاملات الاستعلام لقراءتها فور تغيرها |
| 28 | this.route.queryParams.subscribe(params => { |
| 29 | this.category = params['category'] || 'الكل'; |
| 30 | this.sortOrder = params['sort'] || 'افتراضي'; |
| 31 | console.log('تم استقبال معلمات الاستعلام بنجاح:', params); |
| 32 | }); |
| 33 | } |
| 34 | } |