Dceřiné trasy v Angular

Může se stát, že v komponentě, která je již zapojena do routování, jsou také dceřiné komponenty. Můžeme zařídit, aby se tyto dceřiné komponenty také zobrazovaly přes routing.

Jako příklad mějme komponentu Aaaa. Přistupujeme k ní přes URL /aaaa/. Vytvořme další dvě dceřiné komponenty: Chix a Chiy. Budeme je zobrazovat uvnitř pohledu komponenty Aaaa. Aaaa bude mít vlastní tag router-outlet, ve kterém se v závislosti na URL bude zobrazovat buď jedna, nebo druhá dceřiná komponenta.

Takže, pojďme implementovat popsané.

Vytvořme první dceřinou komponentu:

terminalng generate component chix

Vytvořme druhou dceřinou komponentu:

terminalng generate component chiy

Napišme samostatné dceřiné trasy:

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

Přidejme je k trase komponenty Aaaa jako dceřiné:

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

Cesta z trasy nadřazené komponenty bude začátkem cesty dceřiné. To znamená, že dceřiné komponenty budou dostupné na následujících URL: /aaaa/chix a /aaaa/chiy.

Nyní nakonfigurujme komponentu Aaaa. Importujme tag pro routing:

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

Zapišme jej v dekorátoru:

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

Vložme tag do pohledu:

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

Nyní bude možné přistupovat k dceřiným komponentám podle jejich URL a tyto komponenty se budou zobrazovat. Vyzkoušejte!