Angular-daky çagalaryň marşrutlary

Routingde ulanylan komponentiň içinde-de çaga komponentleri bolup biler. Bu çaga komponentleriniň hem routing arkaly görkezilmegini üpjün etmek mümkin.

Mysal üçin, bizde <Aaaa> komponenti bar diýeliň. Biz oňa </aaaa/> URL arkaly ýüz tutýarys. Ýene-de iki sany çaga komponentini düzeliň: <Chix> we <Chiy>. Olary <Aaaa> komponentiniň şekillendirişi içinde görkezeris. <Aaaa>-iň öz <router-outlet> tegleri bolup, olarda URL-ga baglylykda ýa-da bir, ýa-da beýleki çaga komponenti görkeziler.

Şeýlelik bilen, beýan edileni amala aşyralyň.

Ilkinji çaga komponentini düzeliň:

ng generate component chix

Ikinji çaga komponentini düzeliň:

ng generate component chiy

Aýratyn çaga marşrutlaryny ýazalyň:

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

Olary <Aaaa> komponentiniň marşrutyna çagalar hökmünde goşalyň:

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

Ene komponentiň marşrut ýoly çaga ýolunyň başlangyjy bolar. Bu şuny aňladýar, çaga komponentlerine aşakdaky URL-ler arkaly girmek mümkin bolar: </aaaa/chix> we </aaaa/chiy>.

Indi <Aaaa> komponentini sazlalyň. Routing üçin teg import edeliň:

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

Ony dekoratorda görkezeliň:

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

Tegi şekillendirişe goşalyň:

<p>işleýär</p>
<router-outlet></router-outlet>

Indi çaga komponentlerine olaryň URL-leri arkaly ýüz tutup bolup, bu komponentler görkeziler. Synap görüň!

Beýan edilen çaga komponentleriniň işini amala aşyryň.

Çaga komponentlerini çalşyryjy çykgytlar düzüň.