Децје руте у Angular-у

Може се десити да у компоненти која је већ укључена у рутирање, такође постоје дечије компоненте. Може се уредити тако да се и ове дечије компоненте такође приказују преко рутирања.

За пример, претпоставимо да имамо компоненту Aaaa. Приступамо јој преко URL-а /aaaa/. Направићемо још две дечије компоненте: Chix и Chiy. Приказиваћемо их унутар представља компоненте Aaaa. Aaaa ће имати своју сопствену ознаку router-outlet, у којој ће се у зависности од URL-а приказивати или једна или друга дечија компонента.

Дакле, хајде да реализујемо описано.

Направимо прву дечију компоненту:

ng generate component chix

Направимо другу дечију компоненту:

ng generate component chiy

Напишимо одвојене дечије руте:

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

Додајмо их рути компоненте Aaaa као дечије:

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

Пут из руте родитељске компоненте биће почетак пута дечије. То значи да ће дечије компоненте бити доступне на следећим URL-овима: /aaaa/chix и /aaaa/chiy.

Хајде сада да подесимо компоненту Aaaa. Импортујмо ознаку за рутирање:

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

Пропишимо је у декоратору:

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

Убацимо ознаку у представљање:

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

Сада ће бити могуће приступати дечијим компонентама преко њихових URL-ова и ове компоненте ће се приказивати. Испробајте!

Реализујте описан рад дечијих компоненти.

Направите везе на које ће се пребацивати дечије компоненте.