Дъщерни маршрути в 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 адреси и тези компоненти ще се показват. Опитайте!

Реализирайте описаната работа на дъщерните компоненти.

Направете връзки, при кликването на които ще се превключват дъщерните компоненти.