Angular-da Qo'shimcha Marshrutlar

Marshrutlashda qatnashgan komponentda qo'shimcha komponentlar ham bo'lishi mumkin. Ushbu qo'shimcha komponentlarni ham marshrutlash orqali ko'rsatish mumkin.

Misol uchun, bizda Aaaa komponenti bor deb faraz qilaylik. Biz unga /aaaa/ URL orqali murojaat qilamiz. Yana ikkita qo'shimcha komponent yaratamiz: Chix va Chiy. Ularni Aaaa komponenti ichida ko'rsatamiz. Aaaa o'zining router-outlet tegga ega bo'ladi, unga URLga qarab bir yoki ikkinchi qo'shimcha komponent ko'rsatiladi.

Xo'sh, endi tasvirlangan narsani amalga oshiramiz.

Birinchi qo'shimcha komponentni yaratamiz:

ng generate component chix

Ikkinchi qo'shimcha komponentni yaratamiz:

ng generate component chiy

Alohida qo'shimcha marshrutlarni yozamiz:

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

Ularni Aaaa komponenti marshrutiga qo'shimcha sifatida qo'shamiz:

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

Asosiy komponent marshrutining yo'li qo'shimcha komponent yo'lining boshlanishi bo'ladi. Bu shuni anglatadiki, qo'shimcha komponentlar quyidagi URLlar orqali mavjud bo'ladi: /aaaa/chix va /aaaa/chiy.

Endi Aaaa komponentini sozlaymiz. Marshrutlash tegi import qilamiz:

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

Uni dekoratorda ko'rsatamiz:

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

Tegni ko'rinishga joylashtiramiz:

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

Endi qo'shimcha komponentlarga ularning URLlari orqali murojaat qilish mumkin va bu komponentlar ko'rsatiladi. Sinab ko'ring!

Qo'shimcha komponentlarning ishlashini amalga oshiring.

Qo'shimcha komponentlarni almashtiradigan havolalarni yarating.