Децје руте у Angular-у

Може се десити да у компоненти која је већ укључена у рутирање, такође постоје дечије компоненте. Може се уредити тако да се и ове дечије компоненте такође приказују преко рутирања.

За пример, претпоставимо да имамо компоненту Aaaa. Приступамо јој преко URL-а /aaaa/. Направићемо још две дечије компоненте: 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-ова и ове компоненте ће се приказивати. Испробајте!