注意:这里有许多不同的答案，大多数在某个时期是有效的。事实上，随着Angular团队对路由器的改变，工作原理也发生了多次变化。最终将成为Angular路由器的Router 3.0版本打破了许多这些解决方案，但它提供了一个非常简单的解决方案。从RC.3开始，首选的解决方案是使用[routerLinkActive]，如下所示。
在Angular应用程序中(当前在2.0.0 beta版中)。当我写这篇文章时，0发布)，你如何确定当前活动的路由是什么?
我正在开发一个使用Bootstrap 4的应用程序，我需要一种方法来标记导航链接/按钮为活动时，他们的相关组件显示在<router-output>标签。
我意识到，当单击其中一个按钮时，我可以自己维护状态，但这不能涵盖进入同一路由的多条路径的情况(比如主导航菜单和主组件中的本地菜单)。
任何建议或链接将不胜感激。谢谢。
当前回答
在2020年，如果你想在没有[routerLink]的元素上设置active类，你可以简单地做:
<a
(click)="bookmarks()"
[class.active]="router.isActive('/string/path/'+you+'/need', false)" // <== you need this one. second argument 'false' - exact: true/false
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
>
bookmarks
</a>
其他回答
这对我的主动/非主动路线有帮助:
<a routerLink="/user/bob" routerLinkActive #rla="routerLinkActive" [ngClass]="rla.isActive ? 'classIfActive' : 'classIfNotActive'">
</a>
Ref
我在另一个问题中回答过这个问题，但我相信它可能也与这个问题有关。以下是原始答案的链接: Angular 2:如何用参数确定活动路由?
我一直在尝试设置活动类，而不必确切地知道当前位置(使用路由名)。到目前为止，我得到的最好的解决方案是使用路由器类中的isRouteActive函数。
isrouteactive(指令):布尔值接受一个参数，该参数是一个路由指令对象，并返回true或false，不管该指令对当前路由是否为真。你可以使用路由器的generate(linkParams: Array)来生成路由指令。LinkParams遵循与传入routerLink指令的值完全相同的格式(例如router. isrouteactive (router. isrouteactive))。生成(['/User'， {User:用户。Id}])))。
RouteConfig是这样的(我稍微调整了一下，以显示参数的用法):
@RouteConfig([
{ path: '/', component: HomePage, name: 'Home' },
{ path: '/signin', component: SignInPage, name: 'SignIn' },
{ path: '/profile/:username/feed', component: FeedPage, name: 'ProfileFeed' },
])
视图看起来像这样:
<li [class.active]="router.isRouteActive(router.generate(['/Home']))">
<a [routerLink]="['/Home']">Home</a>
</li>
<li [class.active]="router.isRouteActive(router.generate(['/SignIn']))">
<a [routerLink]="['/SignIn']">Sign In</a>
</li>
<li [class.active]="router.isRouteActive(router.generate(['/ProfileFeed', { username: user.username }]))">
<a [routerLink]="['/ProfileFeed', { username: user.username }]">Feed</a>
</li>
到目前为止，这是我对这个问题的首选解决方案，它可能对你也有帮助。
我解决了在这个环节遇到的一个问题，我发现你的问题有一个简单的解决方案。你可以在样式中使用router-link-active。
@Component({
styles: [`.router-link-active { background-color: red; }`]
})
export class NavComponent {
}
正如已接受答案的一条注释中所提到的，routerLinkActive指令也可以应用于实际<a>标记的容器。
例如，在Twitter Bootstrap选项卡中，active类应该应用于包含链接的<li>标签:
<ul class="nav nav-tabs">
<li role="presentation" routerLinkActive="active">
<a routerLink="./location">Location</a>
</li>
<li role="presentation" routerLinkActive="active">
<a routerLink="./execution">Execution</a>
</li>
</ul>
非常简洁!我假设该指令检查标记的内容，并使用routerLink指令寻找<a>标记。
在2020年，如果你想在没有[routerLink]的元素上设置active类，你可以简单地做:
<a
(click)="bookmarks()"
[class.active]="router.isActive('/string/path/'+you+'/need', false)" // <== you need this one. second argument 'false' - exact: true/false
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
>
bookmarks
</a>
