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'дери аркылуу кайрылууга болот жана бул компоненттер көрсөтүлөт. Сынап көрүңүз!

Сүрөттөлгөн кызыктуу компоненттердин ишин ишке ашырыңыз.

Кызыктуу компоненттерди алмаштыруучу шилтемелерди жасаңыз.