标签:
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