Links voor routing in Angular
In de vorige lessen hebben we handmatig URL's in de adresbalk ingetypt. Laten we nu links maken waarop klikken verschillende componenten zal tonen.
Hiervoor maken we links op een speciale manier. Het punt is dat we geen echte navigatie via links nodig hebben. We willen gewoon dat Angular een ander component toont, de URL in de adresbalk van de browser wijzigt en hierbij de pagina niet vernieuwt.
Daarom gebruiken we, in plaats van het native attribuut href,
het Angular attribuut
RouterLink.
Hiervoor moeten we het importeren:
import { RouterLink } from '@angular/router';
Vermelden in de decorator:
@Component({
......
imports: [RouterOutlet, RouterLink],
......
})
Nu kunnen we onze links maken:
<nav>
<a routerLink="/aaaa/">
Aaaa
</a>
<a routerLink="/bbbb/">
Bbbb
</a>
</nav>
Maak links die uw componenten wisselen.
