Dceřiné trasy v Angular

Může se stát, že v komponentě, která je již zapojena do routování, jsou také dceřiné komponenty. Můžeme zařídit, aby se tyto dceřiné komponenty také zobrazovaly přes routing.

Jako příklad mějme komponentu Aaaa. Přistupujeme k ní přes URL /aaaa/. Vytvořme další dvě dceřiné komponenty: Chix a Chiy. Budeme je zobrazovat uvnitř pohledu komponenty Aaaa. Aaaa bude mít vlastní tag router-outlet, ve kterém se v závislosti na URL bude zobrazovat buď jedna, nebo druhá dceřiná komponenta.

Takže, pojďme implementovat popsané.

Vytvořme první dceřinou komponentu:

ng generate component chix

Vytvořme druhou dceřinou komponentu:

ng generate component chiy

Napišme samostatné dceřiné trasy:

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

Přidejme je k trase komponenty Aaaa jako dceřiné:

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

Cesta z trasy nadřazené komponenty bude začátkem cesty dceřiné. To znamená, že dceřiné komponenty budou dostupné na následujících URL: /aaaa/chix a /aaaa/chiy.

Nyní nakonfigurujme komponentu Aaaa. Importujme tag pro routing:

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

Zapišme jej v dekorátoru:

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

Vložme tag do pohledu:

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

Nyní bude možné přistupovat k dceřiným komponentám podle jejich URL a tyto komponenty se budou zobrazovat. Vyzkoušejte!

Implementujte popsanou funkčnost dceřiných komponent.

Vytvořte odkazy, pomocí kterých se budou přepínat dceřiné komponenty.