Даччыныя маршруты ў Angular

Можа такое быць, што ў кампаненце, які ужо задзейнічаны ў роўтынгу, таксама ёсць даччыныя кампаненты. Можна зрабіць так, каб гэтыя даччыныя кампаненты таксама паказваліся праз роўтынг.

Для прыкладу няхай у нас ёсць кампанент Aaaa. Мы звяртаемся да яго праз урл /aaaa/. Зробім яшчэ два даччыныя кампаненты: Chix і Chiy. Будзем іх паказваць унутры прадстаўлення кампанента Aaaa. У Aaaa будзе ўласны тэг router-outlet, у якім у залежнасці ад URL будзе паказвацца альбо адзін, альбо другі даччыны кампанент.

Ітак, давайце рэалізуем апісанае.

Створiм першы даччыны кампанент:

ng generate component chix

Створiм другі даччыны кампанент:

ng generate component chiy

Напiшем асобныя даччыныя маршруты:

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

Дадамо іх да маршруту кампанента Aaaa у якасці даччыных:

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

Шлях з маршруту бацькоўскага кампанента будзе пачаткам шляху даччынага. Гэта значыць, што дачыныя кампаненты будуць даступныя па наступных урлах: /aaaa/chix і /aaaa/chiy.

Давайце цяпер наладзім кампанент Aaaa. Імпартуем тэг для роўтынгу:

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

Пропiшем яго ў дэкаратары:

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

Уставім тэг у прадстаўленне:

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

Цяпер можна будзе звяртацца да даччыных кампанентаў па іх урлах і гэтыя кампаненты будуць паказвацца. Паспрабуйце!

Рэалізуйце апісаную працу даччыных кампанентаў.

Зрабіце спасылкі, па якіх будуць пераключацца даччыныя кампаненты.