如何在Angular 2中设置Bootstrap导航栏的“active”类？

Question

如何在Angular 2中设置Bootstrap导航栏的“active”类？

twitter-bootstrapangularnavangular2-routing

80

我该如何在Angular 2中设置Bootstrap导航栏的"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>

谢谢

- Hongbo Miao

1

虽然它不完全符合您的要求，但我相信当链接处于活动状态时，routerLink会自动将类设置为router-link-active。因此，如果在您的项目中可能的话，我建议在您的CSS中使用类.router-link-active。 - Gabu

11个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shigiang Liu · Answer 1

版本号为"@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>