Angular Academy · درس

المحلِّلات وبيانات المسارات

حمّل البيانات مسبقًا قبل تفعيل المسار

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

ما هو المحلل

يجلب المحلل البيانات مسبقًا قبل تنشيط المسار، بحيث يُعرض المكوّن والبيانات متاحة مسبقًا — من دون ظهور حالة تحميل داخل المكوّن نفسه.

بيانات المسار الثابتة

تُرفق الخاصية data قيمًا ثابتة بالمسار، ويمكن قراءتها عبر ActivatedRoute.data.

export const routes = [
  { path: 'admin', component: AdminComponent,
    data: { title: 'Admin Panel', roles: ['admin'] } }
];

قراءة بيانات المسار

يُعد route.data observable لكائن البيانات المدمج.

route.data.subscribe(d => {
  console.log(d['title']); // Admin Panel
});

المحلل الوظيفي: ResolveFn

يستخدم Angular الحديث ResolveFn — وهي دالة عادية تعيد البيانات، أو observable أو promise للبيانات.

import { ResolveFn } from '@angular/router';
import { inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

export const userResolver = (route) => {
  const http = inject(HttpClient);
  return http.get('/api/user/' + route.paramMap.get('id'));
};

ربط المحلل بمسار

أرفقوا المحللات ضمن المفتاح resolve. وتظهر النتيجة في route.data ضمن ذلك المفتاح.

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

استخدام البيانات المحللة

اقرؤوا القيمة المحللة من route.data باستخدام مفتاحها.

route.data.subscribe(d => {
  this.user = d['user']; // already loaded
});

البيانات المحللة عبر ربط المدخلات

باستخدام withComponentInputBinding()، تُربط المفاتيح المحللة تلقائيًا بمدخلات المكوّن المطابقة.

export class UserComponent {
  @Input() user!: User; // from resolve: { user: ... }
}

المحللات وتوقيت التنقل

ينتظر الموجّه اكتمال observable المحلل أو استقرار promise قبل تنشيط المسار. ويؤدي المحلل الذي لا يكتمل مطلقًا إلى حظر التنقل.

معالجة أخطاء المحلل

إذا حدث خطأ في المحلل، يُلغى التنقل. عالجوا الأخطاء داخل المحلل لإعادة التوجيه أو إرجاع قيمة بديلة.

export const userResolver = (route) => {
  const http = inject(HttpClient);
  const router = inject(Router);
  return http.get('/api/user/' + route.paramMap.get('id')).pipe(
    catchError(() => { router.navigate(['/404']); return EMPTY; })
  );
};

متى تستخدمون المحللات

استخدموا المحللات للبيانات التي يجب أن تكون موجودة قبل عرض الصفحة. أما البيانات التي يمكن تحميلها تدريجيًا، فعادةً ما يكون جلبها داخل المكوّن، مع حالة تحميل، أفضل لتجربة المستخدم. لا تحظروا التنقل بانتظار بيانات اختيارية بطيئة.

استراتيجية العنوان

يحتوي الموجّه على خاصية مسار مدمجة باسم title وعلى TitleStrategy لتعيين عنوان المستند، وغالبًا ما يُستخدمان مع البيانات المحللة.

export const routes = [
  { path: 'about', component: AboutComponent, title: 'About Us' }
];

تحقق سريع

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

مراجعة: المحللات وبيانات المسار

تُحمّل المحللات البيانات مسبقًا قبل التنشيط.

data: قيم المسار الثابتة.
ResolveFn مع resolve: جلب ديناميكي مسبق إلى route.data.
ينتظر الموجّه الاكتمال؛ عالجوا الأخطاء لتجنب حظر التنقل.

التالي: حُرّاس المسار الوظيفيون.

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

هل درس «المحلِّلات وبيانات المسارات» مجاني؟

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

ماذا ستتعلم في «المحلِّلات وبيانات المسارات»؟

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

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

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

كم من الوقت يستغرق درس «المحلِّلات وبيانات المسارات»؟

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

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

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

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

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