Reitityslinkit Angularissa
Edellisissä oppitunneissa kirjoitimme URL-osoitteen osoiteriville käsin. Luodaan nyt linkit, joiden klikkaaminen näyttää eri komponentteja.
Tätä varten teemme linkit erityisellä tavalla. Asia on siinä, että emme tarvitse todellista siirtymistä linkeihin. Haluamme vain, että Angular näyttää toisen komponentin, muuttaa URL-osoitetta selaimen osoiterivillä päivittämättä sivua.
Siksi natiivin href-attribuutin sijasta
käytämme Angularin attribuuttia
RouterLink.
Tätä varten meidän on tuotava se:
import { RouterLink } from '@angular/router';
Määritä dekorointiin:
@Component({
......
imports: [RouterOutlet, RouterLink],
......
})
Nyt voimme tehdä linkkimme:
<nav>
<a routerLink="/aaaa/">
Aaaa
</a>
<a routerLink="/bbbb/">
Bbbb
</a>
</nav>
Tee linkit, jotka vaihtavat komponenttejasi.
