Links für Routing in Angular

In vorherigen Lektionen haben wir die URL manuell in die Adressleiste eingegeben. Lassen Sie uns nun Links erstellen, deren Anklicken verschiedene Komponenten anzeigt.

Dafür werden wir die Links auf eine besondere Weise erstellen. Die Sache ist die, dass wir keinen echten Link-Wechsel benötigen. Wir möchten einfach nur, dass Angular eine andere Komponente anzeigt, die URL in der Adressleiste des Browsers ändert und dabei die Seite nicht aktualisiert.

Daher verwenden wir anstelle des nativen Attributs href das Angular-Attribut RouterLink.

Um dies zu tun, müssen wir es importieren:

import { RouterLink } from '@angular/router';

Im Dekorator angeben:

@Component({
	......
	imports: [RouterOutlet, RouterLink],
	......
})

Jetzt können wir unsere Links erstellen:

<nav>
	<a routerLink="/aaaa/">
		Aaaa
	</a>
	<a routerLink="/bbbb/">
		Bbbb
	</a>
</nav>

Erstellen Sie Links, die Ihre Komponenten umschalten.