Rutare unghiulară explicată, Cum să navigați la componente bazate pe calea URL-ului

În articolul precedent, am explicat pașii pentru crearea aplicației Angular de bază cu versiunea Angular 2+.

Aici vă voi explica pasul următor, cum să scrieți rutare pentru a naviga către componente diferite pe baza căii URL. Având în vedere că știți ce este componenta și modulul. Dacă aveți dubii în legătură cu modulul și comentariul componentelor aici.

Iată pașii pentru implementarea rutării:

Pasul 1:

Rulați mai jos comanda pentru a crea AppRoutingModule

ng g App App - rutare

Va crea mai jos fișierul app-routing.module.ts cu mai jos conținut.

importați {NgModule} din „@ angular / core”;
import {Routes, RouterModule} din „@ angular / router”;
@NgModule ({importuri: [RouterModule.forChild (rute)], exporturi: [RouterModule]})
export clasa AppRoutingModule {}

Pasul 2:

Editați fișierul de mai sus cu rute:

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

Aici am creat o constantă de trasee de tip și am atribuit calea și componenta respectivă. Astfel, puteți asocia mai multe căi cu componenta respectivă. După editarea fișierului, va arăta ca mai jos:

importați {NgModule} din „@ angular / core”;
import {Routes, RouterModule} din „@ angular / router”;
const routes: Routes = [{path: 'home', component: HomeComponent}, {path: 'login', component: LoginComponent}]
@NgModule ({importuri: [RouterModule.forChild (rute)], exporturi: [RouterModule]})
export clasa AppRoutingModule {}

Acum puteți importa acest AppRoutingModule în fișierul dvs. Modul de aplicații, precum mai jos:

importuri: [
AppRoutingModule,
]

Acum puteți să mă întrebați cum pot defini rutele implicite. Aici trebuie să definiți calea ca mai jos pentru a crea ruta implicită:

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

Adăugați acest lucru în rute ca mai jos:

trasee const: Rute = [
{calea: „acasă”, componentă: HomeComponent},
{path: '', redirectTo: '/ home', pathMatch: 'full'},
{calea: 'autentificare', componentă: LoginComponent}
]

Puteți defini ruta pentru URL-uri nevalide folosind mai jos:

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

Acest articol continuă cu următorul meu articol, acolo vă voi explica cum să creați traseul pentru copii, cum să creați încărcare leneșă și multe altele.