码迷,mamicode.com
首页 > 其他好文 > 详细

[Angular2 Router] Style the Active Angular 2 Navigation Element with routerLinkActive

时间:2016-09-25 22:28:28      阅读:594      评论:0      收藏:0      [点我收藏+]

标签:

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.

 

See Doc

 

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>

 

Github

[Angular2 Router] Style the Active Angular 2 Navigation Element with routerLinkActive

标签:

原文地址:http://www.cnblogs.com/Answer1215/p/5907095.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!