注意:这里有许多不同的答案,大多数在某个时期是有效的。事实上,随着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在下面的评论中。)

其他回答

这对我的主动/非主动路线有帮助:

<a routerLink="/user/bob" routerLinkActive #rla="routerLinkActive" [ngClass]="rla.isActive ? 'classIfActive' : 'classIfNotActive'">
</a>

Ref

在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>

我解决了在这个环节遇到的一个问题,我发现你的问题有一个简单的解决方案。你可以在样式中使用router-link-active。

@Component({
   styles: [`.router-link-active { background-color: red; }`]
})
export class NavComponent {
}

从Angular 8开始,它可以工作:

<li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
    <a [routerLink]="['/']">Home</a>
</li>

{exact: true}确保它与url匹配。