Angular-тағы баламаршруттар

Маршруттауда қолданылатын компоненттің ішінде бала компоненттер де болуы мүмкін. Бұл бала компоненттердің де маршруттау арқылы көрсетілуін жасауға болады.

Мысал ретінде, бізде Aaaa компоненті бар делік. Оған /aaaa/ URL арқылы жетеміз. Тағы екі бала компонент жасайық: 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 арқылы жетуге болады және бұл компоненттер көрінеді. Көріңіз!

Сипатталған бала компоненттер жұмысын жүзеге асырыңыз.

Бала компоненттерді ауыстыратын сілтемелер жасаңыз.