Роҳҳои фарзандӣ дар 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>ит кор мекунад</p>
<router-outlet></router-outlet>

Акнун ба компонентҳои фарзанд тавассути URL-ҳои онҳо муроҷиат кардан мумкин аст ва ин компонентҳо намоиш дода мешаванд. Санҷед!

Кори тавзеҳдодашудаи компонентҳои фарзандро амалӣ кунед.

Истинодҳое созед, ки тавассути онҳо компонентҳои фарзанд иваз карда шаванд.