تهيئة المسارات في Angular

يقدّم هذا الدرس التوجيه في Angular، وهو أسلوب للتنقّل بين الواجهات وإدارة عناوين URL في تطبيقكم.

ما هو التوجيه؟

يساعدكم التوجيه على التنقّل بين المكوّنات أو الصفحات المختلفة في تطبيق Angular استنادًا إلى عنوان URL.

إعداد وحدة التوجيه

أنشئوا وحدة توجيه عند بدء مشروعكم أو لاحقًا باستخدام Angular CLI:

ng generate module app-routing --flat --module=app

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

تُعرَّف المسارات كمصفوفة من المسارات المرتبطة بالمكوّنات:

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

منفذ الموجّه

استخدموا <router-outlet></router-outlet> لعرض المكوّنات المطابقة ديناميكيًا استنادًا إلى المسار.

<router-outlet></router-outlet>

التنقّل باستخدام routerLink

تنقّلوا بين الواجهات باستخدام توجيه routerLink:

<a routerLink="/home">Home</a>

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

يمكنكم أيضًا التنقّل برمجيًا باستخدام خدمة Router:

this.router.navigate(['/home']);

مسارات البدل

عالجوا المسارات غير المعرّفة باستخدام مسارات البدل لعرض صفحة 404 مخصّصة:

{ path: '**', component: PageNotFoundComponent }

الملخص

أصبحتم الآن تفهمون أساسيات التوجيه ويمكنكم تهيئة المسارات في تطبيقات Angular بفعالية. أحسنتم العمل!