شرح التوجيه الزاوي ، كيفية التنقل إلى المكون بناءً على مسار URL

في مقالتي السابقة ، شرحت الخطوات لإنشاء تطبيق Angular الأساسي باستخدام إصدار Angular 2+.

سأشرح هنا الخطوة التالية ، كيفية كتابة التوجيه للانتقال إلى مكون مختلف بناءً على مسار URL. بالنظر إلى أنك تعرف ما هو المكون والوحدة النمطية. إذا كان لديك أي شك بشأن تعليق الوحدة والمكون هنا.

فيما يلي خطوات تنفيذ التوجيه:

الخطوة 1:

قم بتشغيل الأمر أدناه لإنشاء AppRoutingModule

نانوغرام ز الوحدة النمطية التطبيق - التوجيه

سيتم إنشاء ملف app-routering.module.ts أدناه بالمحتوى أدناه.

استيراد {NgModule} من "@ angular / core" ؛
استيراد {Routes، RouterModule} من "@ angular / router" ؛
NgModule ({الواردات: [RouterModule.forChild (مسارات)] ، الصادرات: [RouterModule]})
تصدير فئة AppRoutingModule {}

الخطوة 2:

قم بتحرير الملف أعلاه بالطرق:

مسارات العمل: Routes = [{path: 'home'، المكون: HomeComponent}]

لقد أنشأت هنا ثابتًا من أنواع المسارات وقمت بتعيين المسار والمكون المعنيين. مثل هذا ، يمكنك ربط مسار متعدد بالمكون المعني. بعد تحرير الملف سيبدو أدناه:

استيراد {NgModule} من "@ angular / core" ؛
استيراد {Routes، RouterModule} من "@ angular / router" ؛
مسارات العمل: Routes = [{path: 'home'، المكون: HomeComponent} ، {المسار: 'login' ، المكون: LoginComponent}]
NgModule ({الواردات: [RouterModule.forChild (مسارات)] ، الصادرات: [RouterModule]})
تصدير فئة AppRoutingModule {}

الآن يمكنك استيراد AppRoutingModule في ملف App Module الخاص بك مثل أدناه:

الواردات: [
AppRoutingModule ،
]

الآن يمكنك أن تسألني عن كيفية تحديد التوجيه الافتراضي. هنا تحتاج إلى تحديد المسار مثل أدناه لإنشاء مسار افتراضي:

{المسار: ''، redirectTo: '/ home'، pathMatch: 'full'}

أضف هذا داخل المسارات مثل أدناه:

مسارات الثوابت: طرق = [
{المسار: "home" ، المكون: HomeComponent} ،
{path: ''، redirectTo: '/ home'، pathMatch: 'full'}،
{المسار: "تسجيل الدخول" ، المكون: LoginComponent}
]

يمكنك تحديد مسار عناوين URL غير الصالحة باستخدام أدناه:

{المسار: '**' ، redirectTo: '/ errorPage' ، pathMatch: 'full'}

تستمر هذه المقالة في مقالتي التالية ، وهناك سأشرح كيفية إنشاء مسار طفل ، وكيفية إنشاء تحميل بطيء وأكثر من ذلك بكثير.