You can easily show the user which route they are on using Angular 2’s routerLinkActive. Whenever a route matches the routerLink defined on the element, then the routerLInkActive will add the class that you assign it to.
app.component.ts:
import {Component} from ‘@angular/core‘;
@Component({
selector: ‘app-root‘,
templateUrl: ‘./app.component.html‘,
styleUrls: [‘./app.component.css‘]
})
export class AppComponent {
title = ‘app works!‘;
}
app.component.css:
a{ text-decoration: none; } a.active{ font-weight: bold; color: darkred; }
app.component.html:
<nav> <a [routerLink]="‘‘" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Home</a> <a [routerLink]="‘contact‘" routerLinkActive="active" >Contact</a> </nav> <router-outlet></router-outlet>
[Angular2 Router] Style the Active Angular 2 Navigation Element with routerLinkActive
原文：http://www.cnblogs.com/Answer1215/p/5907095.html