Lenker for routing i Angular
I tidligere leksjoner skrev vi inn URL manuelt i adressefeltet. La oss nå lage lenker som ved klikk vil vise ulike komponenter.
For å gjøre dette vil vi lage lenker på en spesiell måte. Saken er at vi ikke trenger et ekte lenkehopp. Vi ønsker bare at Angular skal vise en annen komponent, endre URLen i nettleserens adressefelt uten å oppdatere siden.
Derfor, i stedet for den native attributten href
vil vi bruke Angular-attributten
RouterLink.
For å gjøre dette må vi importere den:
import { RouterLink } from '@angular/router';
Og definere i dekoratøren:
@Component({
......
imports: [RouterOutlet, RouterLink],
......
})
Nå kan vi lage våre lenker:
<nav>
<a routerLink="/aaaa/">
Aaaa
</a>
<a routerLink="/bbbb/">
Bbbb
</a>
</nav>
Lag lenker som bytter mellom dine komponenter.