Podrute u Angularu

Može se desiti da u komponenti koja je već uključena u rutiranju, takođe postoje podkomponente. Može se postići da se te podkomponente takođe prikazuju preko rutiranja.

Na primer, neka imamo komponentu Aaaa. Pristupamo joj preko URL-a /aaaa/. Napravićemo još dve podkomponente: Chix i Chiy. Prikazaćemo ih unutar prikaza komponente Aaaa. Aaaa će imati svoju oznaku router-outlet, u kojoj će se u zavisnosti od URL-a prikazivati ili jedna ili druga podkomponenta.

Dakle, hajde da realizujemo opisano.

Kreirajmo prvu podkomponentu:

ng generate component chix

Kreirajmo drugu podkomponentu:

ng generate component chiy

Napišimo odvojene podrute:

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

Dodajmo ih ruti komponente Aaaa kao podređene:

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

Putanja iz rute roditeljske komponente biće početak putanje podređene komponente. To znači da će podkomponente biti dostupne na sledećim URL-ovima: /aaaa/chix i /aaaa/chiy.

Hajde sada da podesimo komponentu Aaaa. Uvezićemo oznaku za rutiranje:

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

Propišimo je u dekoratoru:

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

Umetnimo oznaku u prikaz:

<p>radi</p>
<router-outlet></router-outlet>

Sada će moći da se pristupi podređenim komponentama preko njihovih URL-ova i te komponente će se prikazivati. Probajte!

Realizujte opisan rad podkomponenti.

Napravite linkove preko kojih će se prebacivati podkomponente.