Podrejene poti v Angular

Lahko se zgodi, da so v komponenti, ki je že vključena v usmerjanje, tudi podrejene komponente. Možno je narediti tako, da se te podrejene komponente prav tako prikazujejo prek usmerjanja.

Za primer naj imamo komponento Aaaa. Dostopamo do nje prek URL-ja /aaaa/. Naredimo še dve podrejeni komponenti: Chix in Chiy. Prikazovali jih bomo znotraj predstavitve komponente Aaaa. Aaaa bo imel lastno oznako router-outlet, v kateri se bo, odvisno od URL-ja, prikazala ena ali druga podrejena komponenta.

Torej, implementirajmo opisano.

Ustvarimo prvo podrejeno komponento:

ng generate component chix

Ustvarimo drugo podrejeno komponento:

ng generate component chiy

Napišimo ločene podrejene poti:

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

Dodajmo jih k poti komponente Aaaa kot podrejene:

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

Pot iz poti nadrejene komponente bo začetek poti podrejene. To pomeni, da bodo podrejene komponente dostopne na naslednjih URL-jih: /aaaa/chix in /aaaa/chiy.

Nastavimo zdaj komponento Aaaa. Uvozimo oznako za usmerjanje:

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

Zapišimo jo v dekoratorju:

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

Vstavimo oznako v predstavitev:

<p>deluje</p>
<router-outlet></router-outlet>

Zdaj bo mogoče dostopati do podrejenih komponent prek njihovih URL-jev in te komponente se bodo prikazale. Poskusite!

Implementirajte opisano delovanje podrejenih komponent.

Naredite povezave, prek katerih se bodo preklapljale podrejene komponente.