Dziecięce trasy w Angular

Może się zdarzyć, że w komponencie, który jest już używany w roulingu, znajdują się również komponenty potomne. Można sprawić, że te komponenty potomne również będą wyświetlane poprzez routing.

Dla przykładu załóżmy, że mamy komponent Aaaa. Dostęp do niego uzyskujemy przez URL /aaaa/. Stwórzmy jeszcze dwa komponenty potomne: Chix i Chiy. Będziemy je wyświetlać wewnątrz widoku komponentu Aaaa. Aaaa będzie miał własny znacznik router-outlet, w którym w zależności od URL będzie wyświetlany albo jeden, albo drugi komponent potomny.

Zaimplementujmy opisane powyżej.

Stwórzmy pierwszy komponent potomny:

ng generate component chix

Stwórzmy drugi komponent potomny:

ng generate component chiy

Napiszmy osobne trasy potomne:

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

Dodajmy je do trasy komponentu Aaaa jako dzieci:

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

Ścieżka z trasy komponentu nadrzędnego będzie początkiem ścieżki komponentu potomnego. Oznacza to, że komponenty potomne będą dostępne pod następującymi URL: /aaaa/chix i /aaaa/chiy.

Skonfigurujmy teraz komponent Aaaa. Zaimportujmy znacznik do roulingu:

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

Zadeklarujmy go w dekoratorze:

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

Wstawmy znacznik do widoku:

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

Teraz będzie można uzyskać dostęp do komponentów potomnych po ich URLach i te komponenty będą się wyświetlać. Spróbuj!

Zaimplementuj opisaną pracę komponentów potomnych.

Stwórz linki, za pomocą których będą przełączać się komponenty potomne.