Kindersroetes in Angular

Dit kan wees dat in 'n komponent wat reeds in roeteplan gebruik word, daar ook kinderskomponente is. Ons kan dit so maak dat hierdie kinderskomponente ook deur roeteplan vertoon word.

Vir 'n voorbeeld, laat ons 'n komponent Aaaa hê. Ons benader dit via die URL /aaaa/. Laat ons nog twee kinderskomponente skep: Chix en Chiy. Ons sal hulle binne die komponent Aaaa se aansig toon. Die Aaaa komponent sal sy eie router-outlet tag hê, waarin afhangende van die URL óf die een, óf die ander kinderkomponent vertoon sal word.

So, laat ons die beskryfde implementeer.

Laat ons die eerste kinderkomponent skep:

ng generate component chix

Laat ons die tweede kinderkomponent skep:

ng generate component chiy

Laat ons aparte kinderroetes skryf:

let childRoutes: Routes = [
	{ path: 'chix', component: ChixComponent },
	{ path: 'chiy', component: ChiyComponent },
];

Laat ons dit by die roete van komponent Aaaa as kinders voeg:

const appRoutes: Routes = [
	{
		path: 'aaaa',
		component: AaaaComponent,
		children: childRoutes
	},
];

Die pad van die ouerkomponent se roete sal die begin van die kinderkomponent se pad wees. Dit beteken dat die kinderkomponente toeganklik sal wees by die volgende URLs: /aaaa/chix en /aaaa/chiy.

Laat ons nou die komponent Aaaa instel. Laat ons die tag vir roeteplan invoer:

import { RouterOutlet } from '@angular/router';

Laat ons dit in die dekorator spesifiseer:

@Component({
	......
	imports: [RouterOutlet],
	......
})

Laat ons die tag in die aansig plaas:

<p>dit werk</p>
<router-outlet></router-outlet>

Nou sal ons na die kinderkomponente kan gaan via hul URLs en hierdie komponente sal vertoon word. Probeer dit!

Implementeer die beskryfde werking van die kinderskomponente.

Maak skakels waardeur die kinderskomponente gewissel sal word.