Podrute u Angularu

Može se desiti da u komponenti koja je već uključena u rutiranju, takođe postoje podkomponente. Može se postići da se te podkomponente takođe prikazuju preko rutiranja.

Na primer, neka imamo komponentu Aaaa. Pristupamo joj preko URL-a /aaaa/. Napravićemo još dve podkomponente: Chix i Chiy. Prikazaćemo ih unutar prikaza komponente Aaaa. Aaaa će imati svoju oznaku router-outlet, u kojoj će se u zavisnosti od URL-a prikazivati ili jedna ili druga podkomponenta.

Dakle, hajde da realizujemo opisano.

Kreirajmo prvu podkomponentu:

terminalng generate component chix

Kreirajmo drugu podkomponentu:

terminalng generate component chiy

Napišimo odvojene podrute:

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

Dodajmo ih ruti komponente Aaaa kao podređene:

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

Putanja iz rute roditeljske komponente biće početak putanje podređene komponente. To znači da će podkomponente biti dostupne na sledećim URL-ovima: /aaaa/chix i /aaaa/chiy.

Hajde sada da podesimo komponentu Aaaa. Uvezićemo oznaku za rutiranje:

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

Propišimo je u dekoratoru:

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

Umetnimo oznaku u prikaz:

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

Sada će moći da se pristupi podređenim komponentama preko njihovih URL-ova i te komponente će se prikazivati. Probajte!