Nastavenie základného smerovania v Angular

Poďme si teraz nastaviť smerovanie. Urobme to tak, aby ak je v adresnom riadku prehliadača zadaná URL /aaaa/, zobrazil sa prvý komponent, a ak je zadaná /bbbb/, tak druhý.

Takéto nastavenie sa robí v súbore app.routes.ts. Na začiatok je potrebné importovať naše komponenty:

app/app.routes.tsimport { AaaaComponent } from './aaaa/aaaa.component';
import { BbbbComponent } from './bbbb/bbbb.component';

A teraz je potrebné povedať, ktorá URL zodpovedá ktorému komponentu. Na to je potrebné vytvoriť špeciálne pole objektov s smerovaniami (routami). V každom objekte bude kľúč path, v ktorom sa nastavuje URL (bez koncových lomítok), a kľúč component, v ktorom sa nastavuje komponent, ktorý sa zobrazí na tejto URL:

app/app.routes.tsexport const routes: Routes = [
  { path: 'aaaa', component: AaaaComponent },
  { path: 'bbbb', component: BbbbComponent },
];

Nastavenia smerovania však nie sú dostatočné. Je potrebné v nadradenom komponente určiť miesto, do ktorého sa budú naše komponenty vypisovať. Tým sa budeme zaoberať v nasledujúcej lekcii.