Ենթաուղիներ Angular-ում

Կարող է պատահել, որ բաղադրիչում, որն արդեն օգտագործվում է երթուղավորման մեջ, նույնպես կան ենթաբաղադրիչներ: Կարելի է անել այնպես, որ այդ ենթաբաղադրիչները նույնպես ցուցադրվեն երթուղավորման միջոցով:

Օրինակի համար, եկեք ունենանք Aaaa բաղադրիչը: Մենք դրան հասնում ենք /aaaa/ URL-ի միջոցով: Եկեք ստեղծենք ևս երկու ենթաբաղադրիչ՝ Chix և Chiy: Մենք դրանք կցուցադրենք Aaaa բաղադրիչի ներսում: Aaaa-ն կունենա իր սեփական router-outlet թեգը, որտեղ՝ կախված URL-ից, կցուցադրվի կամ մեկը, կամ մյուս ենթաբաղադրիչը:

Այսպիսով, եկեք իրականացնենք նկարագրվածը:

Ստեղծենք առաջին ենթաբաղադրիչը:

terminalng generate component chix

Ստեղծենք երկրորդ ենթաբաղադրիչը:

terminalng generate component chiy

Գրենք առանձին ենթաուղիներ:

app/app.component.tslet childRoutes: Routes = [
  { path: 'chix', component: ChixComponent },
  { path: 'chiy', component: ChiyComponent },
];

Ավելացնենք դրանք Aaaa բաղադրիչի ուղուն որպես ենթաուղիներ:

app/app.component.tsconst appRoutes: Routes = [
  {
    path: 'aaaa',
    component: AaaaComponent,
    children: childRoutes
  },
];

Ծնող բաղադրիչի ուղու ճանապարհը կլինի ենթաուղու սկիզբը: Սա նշանակում է, որ ենթաբաղադրիչները հասանելի կլինեն հետևյալ URL-ներով՝ /aaaa/chix և /aaaa/chiy:

Եկեք այժմ կարգավորենք Aaaa բաղադրիչը: Իմպորտենք երթուղավորման թեգը:

app/aaaa/aaaa.component.tsimport { RouterOutlet } from '@angular/router';

Գրենք այն դեկորատորում:

app/aaaa/aaaa.component.ts@Component({
  ......
  imports: [RouterOutlet],
  ......
})

Տեղադրենք թեգը ներկայացման մեջ:

app/aaaa/aaaa.component.html<p>it works</p>
<router-outlet></router-outlet>

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