Odkazy pre routing v Angular
V predchádzajúcich lekciách sme URL adresu zadávali do adresného riadku manuálne. Poďme teraz vytvoriť odkazy, ktorých kliknutím sa zobrazia rôzne komponenty.
Na to budeme vytvárať odkazy špeciálnym spôsobom. Vec sa má tak, že nepotrebujeme skutočný prechod na inú URL. Chceme len, aby Angular zobrazil iný komponent, zmenil URL v adresnom riadku prehliadača a pri tom neobnovil stránku.
Preto namiesto natívneho atribútu href
budeme používať angularovský atribút
RouterLink.
Aby sme to mohli urobiť, musíme ho importovať:
import { RouterLink } from '@angular/router';
Zadať v dekorátori:
@Component({
......
imports: [RouterOutlet, RouterLink],
......
})
Teraz môžeme vytvoriť naše odkazy:
<nav>
<a routerLink="/aaaa/">
Aaaa
</a>
<a routerLink="/bbbb/">
Bbbb
</a>
</nav>
Vytvorte odkazy, ktoré prepínajú vaše komponenty.