注意:这里有许多不同的答案，大多数在某个时期是有效的。事实上，随着Angular团队对路由器的改变，工作原理也发生了多次变化。最终将成为Angular路由器的Router 3.0版本打破了许多这些解决方案，但它提供了一个非常简单的解决方案。从RC.3开始，首选的解决方案是使用[routerLinkActive]，如下所示。
在Angular应用程序中(当前在2.0.0 beta版中)。当我写这篇文章时，0发布)，你如何确定当前活动的路由是什么?
我正在开发一个使用Bootstrap 4的应用程序，我需要一种方法来标记导航链接/按钮为活动时，他们的相关组件显示在<router-output>标签。
我意识到，当单击其中一个按钮时，我可以自己维护状态，但这不能涵盖进入同一路由的多条路径的情况(比如主导航菜单和主组件中的本地菜单)。
任何建议或链接将不胜感激。谢谢。
当前回答
这对我的主动/非主动路线有帮助:
<a routerLink="/user/bob" routerLinkActive #rla="routerLinkActive" [ngClass]="rla.isActive ? 'classIfActive' : 'classIfNotActive'">
</a>
Ref
其他回答
下面是在Angular 2.0.0-rc版本中添加活动路由样式的完整示例。1，它考虑了空根路径(例如path: '/')
app.component.ts ->路由
import { Component, OnInit } from '@angular/core';
import { Routes, Router, ROUTER_DIRECTIVES } from '@angular/router';
import { LoginPage, AddCandidatePage } from './export';
import {UserService} from './SERVICES/user.service';
@Component({
moduleId: 'app/',
selector: 'my-app',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
providers: [UserService],
directives: [ROUTER_DIRECTIVES]
})
@Routes([
{ path: '/', component: AddCandidatePage },
{ path: 'Login', component: LoginPage }
])
export class AppComponent { //implements OnInit
constructor(private router: Router){}
routeIsActive(routePath: string) {
let currentRoute = this.router.urlTree.firstChild(this.router.urlTree.root);
// e.g. 'Login' or null if route is '/'
let segment = currentRoute == null ? '/' : currentRoute.segment;
return segment == routePath;
}
}
app.component.html
<ul>
<li [class.active]="routeIsActive('Login')"><a [routerLink]="['Login']" >Login</a></li>
<li [class.active]="routeIsActive('/')"><a [routerLink]="['/']" >AddCandidate</a></li>
</ul>
<route-outlet></router-outlet>
Angular2 RC 4的解决方案:
import {containsTree} from '@angular/router/src/url_tree';
import {Router} from '@angular/router';
export function isRouteActive(router: Router, route: string) {
const currentUrlTree = router.parseUrl(router.url);
const routeUrlTree = router.createUrlTree([route]);
return containsTree(currentUrlTree, routeUrlTree, true);
}
在Angular2 RC2中，你可以使用这个简单的实现
<a [routerLink]="['/dashboard']" routerLinkActive="active">Dashboard</a>
这将添加类active的元素与匹配的url，阅读更多关于它在这里
对于Angular版本4+，你不需要使用任何复杂的解决方案。你可以简单地使用[routerLinkActive]="'is-active'"。
举个例子，引导4导航链接:
<ul class="navbar-nav mr-auto">
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/home">Home</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/about-us">About Us</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link " routerLink="/contact-us">Contact</a>
</li>
</ul>
以下是迄今为止发布的所有Angular 2 RC版本对这个问题的答案:
RC4和RC3:
将类应用到link或link的祖先:
<li routerLinkActive="active"><a [routerLink]="['/home']">Home</a></li>
/home应该是URL，而不是路由的名称，因为name属性在路由器v3不再存在于路由对象中。
更多关于routerLinkActive指令的信息。
基于当前路由将class应用到任何div:
将路由器注入组件的构造函数。 用户路由器。Url进行比较。
e.g
<nav [class.transparent]="router.url==('/home')">
</nav>
RC2和RC1:
使用路由器组合。isRouteActive和class.*。例如，基于Home Route应用活动类。
Name和url都可以传递到router.generate中。
<li [class.active]="router.isRouteActive(router.generate(['Home']))">
<a [routerLink]="['Home']" >Home</a>
</li>
