如何在Angular 2中设置Bootstrap navbar"active"类？

Question

如何在Angular 2中设置Bootstrap navbar"active"类？我只找到了Angular 1方式.

当我转到" 关于"页面时,添加class="active"到" 关于",然后class="active"在" 主页"上删除.

<ul class="nav navbar-nav">
    <li class="active"><a [routerLink]="['Home']">Home</a></li>
    <li><a [routerLink]="['About']">About</a></li></li>
</ul>

谢谢

Answer 1

如果您使用新的3.0.0.组件路由器(https://github.com/angular/vladivostok)您可以使用routerLinkActive指令.无需进一步的javascript.

<ul class="nav navbar-nav">
  <li [routerLinkActive]="['active']"> <a [routerLink]="['one']">One</a></li>
  <li [routerLinkActive]="['active']"> <a [routerLink]="['second']">Second</a></li>
</ul>

我使用了"@ angular/router":"^ 3.0.0-alpha.7"

Answer 2

Bert Deterd的答案是正确的,但有一件事可以补充.

如果一个路由是另一个路由的子字符串,您将看到类似的事情发生:2个活动锚点

您可以添加此选项以使其仅与精确路线匹配:

[routerLinkActiveOptions]="{exact:true}"

完整示例:

<ul class="nav navbar-nav">
  <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
    <a [routerLink]="['/']">Home</a>
  </li>
  <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
    <a [routerLink]="['/about']">About</a>
  </li>
  <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
    <a [routerLink]="['/calendar']">Calendar</a>
  </li>
</ul>

Answer 3

对于最新版本的Angular2 RC4,以下简单代码有效:

      <li [class.active]="router.url==='/about'"><a [routerLink]="['/about']">About</a></li>

使用"@ angular/router"中的import {Router}; 并将路由器放在构造函数中.

Answer 4

使用isRouteActive与generate从路由器类.

根据文件:

generate(linkParams:any []):指令

根据提供的Route Link DSL生成指令.

和

isRouteActive(指令:指令):布尔值

给定一条指令,如果指令当前处于活动状态则返回true,否则返回false.

<li [class.active]="router.isRouteActive(router.generate(['/Home']))">
   <a [routerLink]="['/Home']">Home</a>
</li>

Answer 5

这样做(使用RC5)

<li [class.active]="homeLink.classList.contains('active')">
    <a #homeLink routerLink="/home" routerLinkActive="active">Home</a>
</li>