Routing Sudut Dijelaskan, Cara Menavigasi ke Komponen Berdasarkan Laluan URL

Dalam artikel terdahulu saya, saya telah menjelaskan langkah-langkah untuk membuat aplikasi Sudut asas dengan versi Angular 2+.

Di sini saya akan menerangkan langkah seterusnya, bagaimana untuk menulis Routing untuk menavigasi ke komponen yang berbeza berdasarkan laluan URL. Memandangkan anda tahu apa komponen dan modul. Sekiranya anda mempunyai keraguan mengenai modul dan komen komponen di sini.

Berikut adalah langkah-langkah untuk melaksanakan routing:

Langkah 1:

Jalankan arahan di bawah untuk membuat AppRoutingModule

ng g modul App - routing

Ia akan mewujudkan fail di bawah aplikasi-routing.module.ts dengan kandungan di bawah.

import {NgModule} dari '@ angular / core';
import {Routes, RouterModule} dari '@ angular / router';
@NgModule ({import: [RouterModule.forChild (routes)], eksport: [RouterModule]})
kelas eksport AppRoutingModule {}

Langkah 2:

Edit fail di atas dengan laluan:

laluan laluan: Laluan = [{path: 'home', komponen: HomeComponent}]

Di sini saya telah mencipta Route jenis yang tetap dan menetapkan laluan dan komponen masing-masing. Seperti ini, anda boleh mengaitkan pelbagai laluan dengan komponen masing-masing. Selepas mengedit fail itu akan kelihatan seperti di bawah:

import {NgModule} dari '@ angular / core';
import {Routes, RouterModule} dari '@ angular / router';
laluan laluan: Laluan = [{path: 'home', komponen: HomeComponent}, {path: 'login', komponen: LoginComponent}]
@NgModule ({import: [RouterModule.forChild (routes)], eksport: [RouterModule]})
kelas eksport AppRoutingModule {}

Sekarang anda boleh mengimport AppRoutingModule ini dalam fail Modul App anda seperti di bawah:

import: [
AppRoutingModule,
]

Sekarang anda boleh bertanya kepada saya cara menentukan penghalaan lalai. Di sini anda perlu menentukan jalan seperti di bawah untuk membuat laluan lalai:

{path: '', redirectTo: '/ home', pathMatch: 'full'}

Tambah ini dalam laluan seperti di bawah:

laluan laluan: Laluan = [
{path: 'home', komponen: HomeComponent},
{path: '', redirectTo: '/ home', pathMatch: 'full'},
{path: 'login', komponen: LoginComponent}
]

Anda boleh menentukan laluan URls tidak sah dengan menggunakan di bawah:

{path: '**', redirectTo: '/ errorPage', pathMatch: 'full'}

Artikel ini terus ke artikel saya yang seterusnya, di sana saya akan menerangkan cara membuat laluan anak, cara membuat pemanggangan malas dan banyak lagi.