Stylisierung aktiver Links in Angular

Man kann es so einrichten, dass Links, deren URL mit der Adressleiste übereinstimmt, durch einen bestimmten Stil, z.B. eine Farbe, hervorgehoben werden. Dafür gibt es in Angular ein spezielles Attribut RouterLinkActive.

Sehen wir uns an, wie es funktioniert. Importieren wir es zunächst:

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

Tragen wir es im Dekorator ein:

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

Und jetzt fügen wir dieses Attribut zu unseren Links hinzu:

<nav>
	<a
		routerLink="/aaaa-component"
		routerLinkActive="active"
	>
		Aaaa Component
	</a>
	<a
		routerLink="/bbbb-component"
		routerLinkActive="active"
	>
		Bbbb Component
	</a>
</nav>

Wie Sie sehen, ist der Wert des Attributs in unserem Beispiel active. Dies ist der Name der CSS-Klasse, die dem aktiven Link zugewiesen wird. Jetzt können wir sie nach Belieben gestalten:

.active {
	color: red;
}

Stylisieren Sie die aktiven Links in Ihrem Projekt.