Ենթաուղիներ 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>it works</p>
<router-outlet></router-outlet>

Այժմ հնարավոր կլինի դիմել ենթաբաղադրիչներին նրանց URL-ների միջոցով, և այդ բաղադրիչները կցուցադրվեն: Փորձե՛ք:

Իրականացրե՛ք նկարագրված ենթաբաղադրիչների աշխատանքը:

Ստեղծե՛ք հղումներ, որոնց միջոցով կփոխարկվեն ենթաբաղադրիչները: