Vinklet ruteforklaring forklaret, hvordan man navigerer til komponent baseret på URL-sti

I min tidligere artikel har jeg forklaret trin til at oprette grundlæggende Angular-applikationer med Angular 2+ version.

Her vil jeg forklare næste trin, hvordan man skriver routing for at navigere til forskellige komponenter baseret på URL-sti. I betragtning af at du ved, hvad der er komponent og modul. Hvis du er i tvivl om kommentar til modul og komponenter her.

Her er trin til implementering af routing:

Trin 1:

Kør under kommandoen for at oprette AppRoutingModule

ng g-modul App - routing

Det vil oprette nedenfor app-routing.module.ts-fil med nedenfor indhold.

import {NgModule} fra '@ vinkel / kerne';
import {Routes, RouterModule} fra '@ vinkel / router';
@NgModule ({import: [RouterModule.forChild (ruter)], eksport: [RouterModule]})
eksportklasse AppRoutingModule {}

Trin 2:

Rediger ovenstående fil med ruter:

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

Her har jeg oprettet en konstant type ruter og tildelt respektive sti og komponent. På denne måde kan du knytte flere stier til den respektive komponent. Efter redigering af filen ser det ud som nedenfor:

import {NgModule} fra '@ vinkel / kerne';
import {Routes, RouterModule} fra '@ vinkel / router';
const routes: Routes = [{path: 'home', component: HomeComponent}, {path: 'login', component: LoginComponent}]
@NgModule ({import: [RouterModule.forChild (ruter)], eksport: [RouterModule]})
eksportklasse AppRoutingModule {}

Nu kan du importere denne AppRoutingModule i din App Module-fil som nedenfor:

import: [
AppRoutingModule,
]

Nu kan du spørge mig, hvordan man definerer standard routing. Her skal du definere stien som nedenfor for at oprette standardrute:

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

Tilføj dette inden for ruter som nedenfor:

const routes: Ruter = [
{path: 'home', komponent: HomeComponent},
{path: '', redirectTo: '/ home', pathMatch: 'full'},
{sti: 'login', komponent: LoginComponent}
]

Du kan definere rute for ugyldige URls ved hjælp af nedenstående:

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

Denne artikel fortsætter til Min næste artikel, der vil jeg forklare, hvordan man opretter børnerute, hvordan man opretter doven indlæsning og meget mere.