注意:这里有许多不同的答案，大多数在某个时期是有效的。事实上，随着Angular团队对路由器的改变，工作原理也发生了多次变化。最终将成为Angular路由器的Router 3.0版本打破了许多这些解决方案，但它提供了一个非常简单的解决方案。从RC.3开始，首选的解决方案是使用[routerLinkActive]，如下所示。
在Angular应用程序中(当前在2.0.0 beta版中)。当我写这篇文章时，0发布)，你如何确定当前活动的路由是什么?
我正在开发一个使用Bootstrap 4的应用程序，我需要一种方法来标记导航链接/按钮为活动时，他们的相关组件显示在<router-output>标签。
我意识到，当单击其中一个按钮时，我可以自己维护状态，但这不能涵盖进入同一路由的多条路径的情况(比如主导航菜单和主组件中的本地菜单)。
任何建议或链接将不胜感激。谢谢。
当前回答
在新的Angular路由器中，你可以为你的所有链接添加一个[routerLinkActive]="['your-class-name']"属性:
<a [routerLink]="['/home']" [routerLinkActive]="['is-active']">Home</a>
如果只需要一个类，则使用简化的非数组格式:
<a [routerLink]="['/home']" [routerLinkActive]="'is-active'">Home</a>
如果只需要一个类，可以使用更简单的格式:
<a [routerLink]="['/home']" routerLinkActive="is-active">Home</a>
有关更多信息，请参阅文档不完整的routerLinkActive指令。(我主要是通过反复试验得出这个结论的。)
更新:更好的routerLinkActive指令文档现在可以在这里找到。(感谢@Victor Hugo Arango a在下面的评论中。)
其他回答
我解决了在这个环节遇到的一个问题，我发现你的问题有一个简单的解决方案。你可以在样式中使用router-link-active。
@Component({
styles: [`.router-link-active { background-color: red; }`]
})
export class NavComponent {
}
基于https://github.com/angular/angular/pull/6407#issuecomment-190179875对@alex-correia-santos的回答进行了小改进
import {Router, RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
// ...
export class App {
constructor(private router: Router) {
}
// ...
isActive(instruction: any[]): boolean {
return this.router.isRouteActive(this.router.generate(instruction));
}
}
像这样使用它:
<ul class="nav navbar-nav">
<li [class.active]="isActive(['Home'])">
<a [routerLink]="['Home']">Home</a>
</li>
<li [class.active]="isActive(['About'])">
<a [routerLink]="['About']">About</a>
</li>
</ul>
下面是使用RouteData根据当前路由样式化菜单栏项的方法:
routecconfig包含了tab(当前路由)的数据:
@RouteConfig([
{
path: '/home', name: 'Home', component: HomeComponent,
data: {activeTab: 'home'}, useAsDefault: true
}, {
path: '/jobs', name: 'Jobs', data: {activeTab: 'jobs'},
component: JobsComponent
}
])
一份布局:
<li role="presentation" [ngClass]="{active: isActive('home')}">
<a [routerLink]="['Home']">Home</a>
</li>
<li role="presentation" [ngClass]="{active: isActive('jobs')}">
<a [routerLink]="['Jobs']">Jobs</a>
</li>
类:
export class MainMenuComponent {
router: Router;
constructor(data: Router) {
this.router = data;
}
isActive(tab): boolean {
if (this.router.currentInstruction && this.router.currentInstruction.component.routeData) {
return tab == this.router.currentInstruction.component.routeData.data['activeTab'];
}
return false;
}
}
现在我正在使用rc。4与bootstrap 4和这个对我来说是完美的:
<li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact:
true}">
<a class="nav-link" [routerLink]="['']">Home</a>
</li>
这将适用于url: /home
纯html模板就像
<a [routerLink]="['/home']" routerLinkActive="active">Home</a>
<a [routerLink]="['/about']" routerLinkActive="active">About us</a>
<a [routerLink]="['/contact']" routerLinkActive="active">Contacts</a>
