如何在Angular 2中设置Bootstrap navbar“active”类？
如何在Angular 2中设置Bootstrap navbar“active”类？ 我只findAngular 1的方法 。
当我转到关于页面时，添加class="active"到About ，并在Home上删除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>
谢谢
如果你使用新的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/路由器”：“^ 3.0.0-alpha.7”
伯特·德尔德的答案是正确的，但有一件事可以加上。
如果一条路由是另一条路由的子string，则会看到类似这样的情况： 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>
使用isRouteActive并从Router类generate 。
根据文档：
生成（linkParams：任何[]）：指令
根据提供的路由链路DSL生成指令。
和
isRouteActive（指令：指令）：布尔值
给定指令，如果指令当前处于活动状态则返回true，否则返回false。
<li [class.active]="router.isRouteActive(router.generate(['/Home']))"> <a [routerLink]="['/Home']">Home</a> </li>
对于最新版本的Angular2 RC4，以下简单的代码工作：
<li [class.active]="router.url==='/about'"><a [routerLink]="['/about']">About</a></li>
从“@ angular / router”使用导入{路由器}; 并把路由器放在构造函数中。
这个技巧（使用RC5）
<li [class.active]="homeLink.classList.contains('active')"> <a #homeLink routerLink="/home" routerLinkActive="active">Home</a> </li>
在RC2上，这不适合我。 我结束了使用
<li (click)="setActive('home')" class="{{getActive('home')}}"> <a [routerLink]="['/FullScreen']">Home</a></li>
并在后面的代码中跟踪它
currentChoice: string = "home"; setActive(choice: string): void{ this.currentChoice = choice; } getActive(choice: string) : string{ if(this.currentChoice == choice) return "active"; else return "not"; }
在“@ angular / router”：“^ 3.3.1”中，以前版本的区别是routerLinkActive中的括号
[routerLinkActive]="['active']"
在最后的版本中，ng2会抱怨，所以只要删除括号
routerLinkActive="active"
版本“@ angular / router”：“^ 3.3.1”
我只是把路由的名字，我在我的app.route.ts声明
import { ModuleWithProviders } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { HomeComponent } from './home/home.component'; import { DeclarationsComponent } from './declarations/declarations.component'; const appRoutes: Routes = [ { path: '', pathMatch: 'full', component: HomeComponent }, { path: 'declarations', pathMatch: 'full', component: DeclarationsComponent } ]; export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
而且在视图中，我只写了路线的名字
<ul class="nav navbar-nav"> <li routerLinkActive="active"><a routerLink="">Home</a></li> <li><a routerLink="declarations">SAV</a></li> </ul>
<a routerLink="/user/bob" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">Bob</a>
