Podrejene poti v Angular

Lahko se zgodi, da so v komponenti, ki je že vključena v usmerjanje, tudi podrejene komponente. Možno je narediti tako, da se te podrejene komponente prav tako prikazujejo prek usmerjanja.

Za primer naj imamo komponento Aaaa. Dostopamo do nje prek URL-ja /aaaa/. Naredimo še dve podrejeni komponenti: Chix in Chiy. Prikazovali jih bomo znotraj predstavitve komponente Aaaa. Aaaa bo imel lastno oznako router-outlet, v kateri se bo, odvisno od URL-ja, prikazala ena ali druga podrejena komponenta.

Torej, implementirajmo opisano.

Ustvarimo prvo podrejeno komponento:

terminalng generate component chix

Ustvarimo drugo podrejeno komponento:

terminalng generate component chiy

Napišimo ločene podrejene poti:

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

Dodajmo jih k poti komponente Aaaa kot podrejene:

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

Pot iz poti nadrejene komponente bo začetek poti podrejene. To pomeni, da bodo podrejene komponente dostopne na naslednjih URL-jih: /aaaa/chix in /aaaa/chiy.

Nastavimo zdaj komponento Aaaa. Uvozimo oznako za usmerjanje:

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

Zapišimo jo v dekoratorju:

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

Vstavimo oznako v predstavitev:

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

Zdaj bo mogoče dostopati do podrejenih komponent prek njihovih URL-jev in te komponente se bodo prikazale. Poskusite!