Podradené trasy v Angular

Môže sa stať, že v komponente, ktorý je už zapojený do smerovania, sú tiež podradené komponenty. Môžeme urobiť tak, aby sa tieto podradené komponenty tiež zobrazovali cez smerovanie.

Pre príklad nech máme komponent Aaaa. Pristupujeme k nemu cez URL /aaaa/. Vytvorme ďalšie dva podradené komponenty: Chix a Chiy. Budeme ich zobrazovať vo vnútri zobrazenia komponentu Aaaa. Aaaa bude mať vlastný tag router-outlet, v ktorom v závislosti od URL sa bude zobrazovať buď jeden, alebo druhý podradený komponent.

Takže, poďme realizovať opísané.

Vytvorme prvý podradený komponent:

terminalng generate component chix

Vytvorme druhý podradený komponent:

terminalng generate component chiy

Napíšme samostatné podradené trasy:

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

Pridajme ich k trase komponentu Aaaa ako podradené:

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

Cesta z trasy nadradeného komponentu bude začiatkom cesty podradeného. To znamená, že podradené komponenty budú prístupné na nasledujúcich URL: /aaaa/chix a /aaaa/chiy.

Poďme teraz nastaviť komponent Aaaa. Importujme tag pre smerovanie:

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

Zapíšme ho v dekorátori:

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

Vložme tag do zobrazenia:

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

Teraz bude možné pristupovať k podradeným komponentom podľa ich URL a tieto komponenty sa budú zobrazovať. Vyskúšajte!