Podradené trasy v Angular

Môže sa stať, že v komponente, ktorý je už zapojený do smerovania, sú tiež podradené komponenty. Môžeme urobiť tak, aby sa tieto podradené komponenty tiež zobrazovali cez smerovanie.

Pre príklad nech máme komponent Aaaa. Pristupujeme k nemu cez URL /aaaa/. Vytvorme ďalšie dva podradené komponenty: Chix a Chiy. Budeme ich zobrazovať vo vnútri zobrazenia komponentu Aaaa. Aaaa bude mať vlastný tag router-outlet, v ktorom v závislosti od URL sa bude zobrazovať buď jeden, alebo druhý podradený komponent.

Takže, poďme realizovať opísané.

Vytvorme prvý podradený komponent:

ng generate component chix

Vytvorme druhý podradený komponent:

ng generate component chiy

Napíšme samostatné podradené trasy:

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

Pridajme ich k trase komponentu Aaaa ako podradené:

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

Cesta z trasy nadradeného komponentu bude začiatkom cesty podradeného. To znamená, že podradené komponenty budú prístupné na nasledujúcich URL: /aaaa/chix a /aaaa/chiy.

Poďme teraz nastaviť komponent Aaaa. Importujme tag pre smerovanie:

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

Zapíšme ho v dekorátori:

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

Vložme tag do zobrazenia:

<p>it works</p>
<router-outlet></router-outlet>

Teraz bude možné pristupovať k podradeným komponentom podľa ich URL a tieto komponenty sa budú zobrazovať. Vyskúšajte!

Realizujte opísanú činnosť podradených komponentov.

Vytvorte odkazy, ktorými sa budú prepínať podradené komponenty.