Länkar för routing i Angular
I tidigare lektioner skrev vi in URL:en i adressfältet manuellt. Låt oss nu skapa länkar, vars klick kommer att visa olika komponenter.
För att göra detta kommer vi att skapa länkar på ett speciellt sätt. Saken är den att vi inte behöver ett riktigt sidbyte vid klick på länkarna. Vi vill bara att Angular ska visa en annan komponent, ändra URL:en i webbläsarens adressfält och samtidigt inte ladda om sidan.
Därför, istället för det inbyggda attributet href
kommer vi att använda Angular-attributet
RouterLink.
För att göra detta måste vi importera det:
import { RouterLink } from '@angular/router';
Deklarera det i dekoratören:
@Component({
......
imports: [RouterOutlet, RouterLink],
......
})
Nu kan vi skapa våra länkar:
<nav>
<a routerLink="/aaaa/">
Aaaa
</a>
<a routerLink="/bbbb/">
Bbbb
</a>
</nav>
Skapa länkar som växlar mellan dina komponenter.
