Nastavení základního routování v Angular

Nyní nastavme routování. Uděláme to tak, aby když je v adresním řádku prohlížeče zadána URL /aaaa/, zobrazovala se první komponenta, a když je zadáno /bbbb/, tak druhá.

Toto nastavení se provádí v souboru app.routes.ts. Nejprve je třeba importovat naše komponenty:

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

A nyní je třeba říct, která URL adresa odpovídá které komponentě. K tomu je třeba vytvořit speciální pole objektů s maršrutami (routes). V každém objektu bude klíč path, ve kterém se nastavuje URL (bez koncových lomítek), a klíč component, ve kterém se nastavuje komponenta, která se zobrazí na této URL:

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

Samotné nastavení routování však nestačí. Je třeba v rodičovské komponentě určit místo, do kterého se budou naše komponenty vypisovat. Tím se budeme zabývat v příští lekci.