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>ишлаяпти</p>
<router-outlet></router-outlet>

Энди бола компонентларга уларнинг URLлари орқали мурожаат қилиш мумкин бўлади ва ушбу компонентлар кўрсатилади. Синаб кўринг!