Gyermek útvonalak az Angular-ban

Előfordulhat, hogy egy olyan komponensben, amely már részt vesz az útválasztásban, vannak gyermek komponensek is. Meg lehet tenni úgy, hogy ezek a gyermek komponensek szintén az útválasztáson keresztül jelenjenek meg.

Példaként legyen egy Aaaa komponensünk. A /aaaa/ URL-en keresztül érjük el. Készítsünk még két gyermek komponenst: Chix és Chiy. Ezeket a Aaaa komponens belsejében fogjuk megjeleníteni. A Aaaa komponensnek saját router-outlet tagje lesz, amelyben az URL-től függően vagy az egyik, vagy a másik gyermek komponens jelenik meg.

Tehát valósítsuk meg a leírtakat.

Hozzuk létre az első gyermek komponenst:

ng generate component chix

Hozzuk létre a második gyermek komponenst:

ng generate component chiy

Írjunk különálló gyermek útvonalakat:

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

Adjuk hozzá őket a Aaaa komponens útvonalához mint gyermekek:

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

A szülő komponens útvonalának elérési útja lesz a gyermek elérési útjának kezdete. Ez azt jelenti, hogy a gyermek komponensek a következő URL-eken lesznek elérhetők: /aaaa/chix és /aaaa/chiy.

Most állítsuk be a Aaaa komponenst. Importáljuk az útválasztáshoz szükséges tagot:

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

Írjuk be a dekorátorba:

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

Helyezzük el a tagot a nézetben:

<p>működik</p>
<router-outlet></router-outlet>

Most már el lehet érni a gyermek komponenseket azok URL-jein, és ezek a komponensek meg fognak jelenni. Próbáld ki!

Valósítsd meg a gyermek komponensek leírt működését.

Készíts linkeket, amelyekkel a gyermek komponensek között lehet váltani.