Angular Academy · درس

أحداث الموجّه والتنقّل

استجب لأحداث دورة حياة التنقّل

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

تدفق أحداث الموجّه

إن Router.events عبارة عن Observable يُصدر أحداثًا أثناء دورة حياة التنقل: البدء، والتعرّف على المسار، والتحقق من الحراس، والحل، والانتهاء. اشتركوا فيه للاستجابة إلى التنقل على مستوى التطبيق.

أنواع الأحداث الرئيسية

من الأحداث الشائعة: NavigationStart وNavigationEnd وNavigationCancel وNavigationError. كل منها مثيل لفئة يمكنكم التصفية بناءً عليه.

الاستماع إلى NavigationEnd

صفّوا التدفق للوصول إلى نوع حدث محدد باستخدام filter وفحص instanceof.

import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs';

const router = inject(Router);
router.events.pipe(
  filter(e => e instanceof NavigationEnd)
).subscribe(e => console.log('navigated to', e.urlAfterRedirects));

مؤشر تحميل عام

اعرضوا مؤشر تحميل بين NavigationStart وNavigationEnd/Cancel/Error.

router.events.subscribe(e => {
  if (e instanceof NavigationStart) this.loading = true;
  if (e instanceof NavigationEnd ||
      e instanceof NavigationCancel ||
      e instanceof NavigationError) this.loading = false;
});

الانتقال إلى أعلى الصفحة عند التنقل

أعيدوا ضبط موضع التمرير بعد كل تنقل ناجح. (يتوفر أيضًا الخيار المضمّن scrollPositionRestoration.)

router.events.pipe(
  filter(e => e instanceof NavigationEnd)
).subscribe(() => window.scrollTo(0, 0));

تتبّع الصفحات للتحليلات

يُعد NavigationEnd نقطة الربط المثالية لتسجيل مشاهدات الصفحات في نظام التحليلات.

router.events.pipe(
  filter((e): e is NavigationEnd => e instanceof NavigationEnd)
).subscribe(e => analytics.pageView(e.urlAfterRedirects));

التنقل برمجيًا

تتلقى router.navigate مصفوفة أوامر، بينما تتلقى router.navigateByUrl سلسلة عنوان URL كاملة. ويعيد كلاهما وعدًا تُحل قيمته إلى ما إذا كان التنقل قد نجح.

router.navigate(['/user', 42]);
router.navigateByUrl('/search?q=ng');

const ok = await router.navigate(['/home']);
console.log('success?', ok);

التنقل النسبي

استخدموا relativeTo للتنقل نسبةً إلى المسار الحالي، مثلًا من مكوّن فرعي.

const route = inject(ActivatedRoute);
router.navigate(['../sibling'], { relativeTo: route });

routerLink والحالة النشطة

في القوالب، يتولى routerLink التنقل بطريقة تصريحية، بينما يضيف routerLinkActive فئة CSS إلى الرابط النشط.

<a routerLink="/home" routerLinkActive="active">Home</a>
<a [routerLink]="['/user', userId]"
   routerLinkActive="active">Profile</a>

معالجة NavigationError

اشتركوا في NavigationError لمعالجة عمليات التنقل الفاشلة (مثل فشل محلّل أو التحميل الكسول)، ثم اعرضوا رسالة واضحة للمستخدم.

router.events.pipe(
  filter(e => e instanceof NavigationError)
).subscribe(e => console.error('nav failed', e.error));

تصفية الأحداث مع الحفاظ على الأنواع

يوفر Angular أيضًا تحديد النوع RouterEvent؛ إذ يمنحكم شرط حارس النوع داخل filter حدثًا محدد النوع بشكل صحيح في المشترك، من دون تحويل النوع.

تحقق سريع

اختبروا مدى فهمكم لأحداث الموجّه.

مراجعة: أحداث الموجّه والتنقل

يتيح Router.events الوصول إلى دورة حياة التنقل.

صفّوا الأحداث NavigationStart/End/Cancel/Error.
استخدموها للتحكم في مؤشرات التحميل وإعادة ضبط التمرير والتحليلات.
تنقلوا باستخدام navigate/navigateByUrl أو routerLink.

لقد أكملتم Angular Router Advanced.

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

هل درس «أحداث الموجّه والتنقّل» مجاني؟

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

ماذا ستتعلم في «أحداث الموجّه والتنقّل»؟

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

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

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

كم من الوقت يستغرق درس «أحداث الموجّه والتنقّل»؟

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

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

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

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

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