Angular Academy · درس

معاملات المسار ومعاملات الاستعلام

اقرأ معاملات المسارات واستجب لها

الدرس 1 من 413 خطوة

معاملات المسار ومعاملات الاستعلام درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.

معاملات المسار مقابل معاملات الاستعلام

تُعد معاملات المسار جزءًا من المسار (/user/42). أما معاملات الاستعلام فتُضاف بعد ? (/search?q=ng&page=2). ويمنحكم الموجّه وصولًا تفاعليًا إلى كليهما.

تعريف معامل مسار

استخدموا النقطتين في المسار للإعلان عن معامل.

export const routes = [
  { path: 'user/:id', component: UserComponent }
];

قراءة المعاملات باستخدام paramMap

يُعد ActivatedRoute.paramMap observable يبعث قيمة كلما تغيرت معاملات المسار. استخدموا .get() لقراءة قيمة.

import { inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

const route = inject(ActivatedRoute);
route.paramMap.subscribe(params => {
  const id = params.get('id');
  console.log('user id', id);
});

سبب مراقبة المعاملات

قد تؤدي عملية الانتقال من /user/1 إلى /user/2 إلى إعادة استخدام المكوّن. يُنفذ المُنشئ مرة واحدة، لكن paramMap يبعث مرة أخرى — لذا اشتركوا فيه للاستجابة للتغيير.

Snapshot للقراءات لمرة واحدة

إذا لم يُعَد استخدام المكوّن أبدًا مع معامل مختلف، يمكنكم قراءة snapshot بشكل متزامن.

const id = route.snapshot.paramMap.get('id');
// only valid if the route param will not change
// while this component instance is alive

معاملات الاستعلام باستخدام queryParamMap

يعرض queryParamMap قيم سلسلة الاستعلام، وهو أيضًا observable.

route.queryParamMap.subscribe(qp => {
  const page = Number(qp.get('page') ?? '1');
  const q = qp.get('q') ?? '';
  console.log(q, page);
});

التنقل باستخدام معاملات الاستعلام

استخدموا الخيار queryParams في router.navigate أو توجيه routerLink.

import { Router } from '@angular/router';
const router = inject(Router);

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

الحفاظ على معاملات الاستعلام

يحافظ queryParamsHandling: 'merge' على المعاملات الحالية أثناء تحديث بعضها؛ بينما ينقلها 'preserve' عبر عمليات التنقل.

router.navigate(['/search'], {
  queryParams: { page: 3 },
  queryParamsHandling: 'merge'
});

ربط مدخلات المكوّن بالطريقة الحديثة

باستخدام withComponentInputBinding()، يمكن ربط معاملات المسار والاستعلام مباشرةً بـ @Input() في المكوّن، أو بإشارات الإدخال، مع تجاوز ActivatedRoute.

// in provideRouter(routes, withComponentInputBinding())

export class UserComponent {
  @Input() id!: string; // bound from /user/:id
}

getAll للمعاملات المتكررة

استخدموا getAll() عندما يمكن أن يظهر مفتاح الاستعلام عدة مرات، مثل ?tag=a&tag=b.

route.queryParamMap.subscribe(qp => {
  const tags = qp.getAll('tag'); // ['a', 'b']
  console.log(tags);
});

دمج المعاملات مع تحميل البيانات

من الأنماط الشائعة تحويل المعامل إلى طلب HTTP باستخدام switchMap، بحيث يؤدي تغيير المعرّف إلى إعادة جلب البيانات.

route.paramMap.pipe(
  switchMap(p => this.http.get('/api/user/' + p.get('id')))
).subscribe(user => console.log(user));

تحقق سريع

اختبروا مدى فهمكم لمعاملات المسار.

أجب عليها في الدرس التفاعلي

مراجعة: معاملات المسار والاستعلام

يعرض الموجّه المعاملات بصورة تفاعلية.

paramMap: معاملات المسار، راقبوها عند إعادة الاستخدام.
queryParamMap: سلسلة الاستعلام، مع getAll للمعاملات المتكررة.
snapshot للقراءات لمرة واحدة.
withComponentInputBinding() يربط المعاملات بمدخلات المكوّن.

التالي: محللات البيانات وبيانات المسار.

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 38
الدروس: 144

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «معاملات المسار ومعاملات الاستعلام» مجاني؟

نعم — نص درس «معاملات المسار ومعاملات الاستعلام» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.

ماذا ستتعلم في «معاملات المسار ومعاملات الاستعلام»؟

اقرأ معاملات المسارات واستجب لها تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟

لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «معاملات المسار ومعاملات الاستعلام»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟

نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Angular Academy