Bucaqlı marşrutlaşdırma izah edildi, URL yoluna əsaslanan komponentə necə getmək olar

Əvvəlki məqaləmdə, Angular 2+ versiyası ilə əsas bucaqlı tətbiqetmənin yaradılması addımlarını izah etdim.

Burada növbəti addımı izah edəcəyəm, URL yoluna əsaslanan fərqli komponentə getmək üçün marşrutlaşdırma qaydasını necə yazacam. Nəzərə alsaq ki, komponent və modul nədir. Buradakı modul və komponent şərhinə şübhə varsa.

Marşrutlaşdırmanı həyata keçirmək üçün addımlar:

Addım 1:

AppRoutingModule yaratmaq üçün aşağıda əmrlə işləyin

ng g modulu App - marşrutlaşdırma

Aşağıdakı məzmunu olan app-routing.module.ts faylı yaradacaqdır.

'@ açısal / core' dən {NgModule} idxal edin;
'@ açısal / router' dən {Marşrutlar, RouterModule} idxal edin;
@ NgModule ({idxal: [RouterModule.forChild (marşrutlar)], ixrac: [RouterModule]})
ixrac sinfi AppRoutingModule {}

Addım 2:

Yuxarıdakı faylı marşrutlarla düzəldin:

const marşrutları: Marşrutlar = [{yol: 'ev', komponent: HomeComponent}]

Burada sabit bir marşrut xətti yaratdım və müvafiq yol və komponent təyin etdim. Bu kimi bir çox yolu müvafiq komponentlə əlaqələndirə bilərsiniz. Faylı redaktə etdikdən sonra aşağıdakı kimi görünür:

'@ açısal / core' dən {NgModule} idxal edin;
'@ açısal / router' dən {Marşrutlar, RouterModule} idxal edin;
const marşrutları: Marşrutlar = [{yol: 'ev', komponent: HomeComponent}, {yol: 'giriş', komponent: LoginComponent}]
@ NgModule ({idxal: [RouterModule.forChild (marşrutlar)], ixrac: [RouterModule]})
ixrac sinfi AppRoutingModule {}

İndi bu AppRoutingModule'yi App Module faylınıza aşağıdakı kimi idxal edə bilərsiniz:

idxal: [
AppRoutingModule,
]

İndi mənə yönlendirme yolu necə təyin edəcəyinizi soruşa bilərsiniz. Defolt marşrut yaratmaq üçün aşağıdakı kimi yolu müəyyənləşdirməlisiniz:

{yol: '', yönləndirməMənbə: '/ ev', pathMatch: 'tam'}

Aşağıdakı kimi daxili marşrutları əlavə edin:

const marşrutları: Marşrutlar = [
{yol: 'ev', komponent: HomeComponent},
{yol: '', yönləndirməQiyməti: '/ ev', pathMatch: 'tam'},
{yol: 'giriş', komponent: LoginComponent}
]

Aşağıdakılardan istifadə edərək etibarsız UR-lər üçün marşrutu təyin edə bilərsiniz:

{yol: '**', yönləndirməMənbə: '/ errorPage', pathMatch: 'full'}

Bu məqalə növbəti məqaləmə davam edir, orada uşaq marşrutunu necə yaratmağı, tənbəl yükləməni necə yaratmağı və daha çoxunu izah edəcəyəm.