javascript – 在Angular中,您如何确定活动路线？

注意：这里有许多不同的答案,大多数都是有效的.事实是,当Angular团队改变其路由器时,有效的改变了很多次.最终将成为Angular路由器的Router 3.0版本打破了许多这些解决方案,但它提供了一个非常简单的解决方案.从RC.3开始,首选解决方案是使用[routerLinkActive],如this answer所示.

在Angular应用程序中(当我写这篇文章时,目前在2.0.0-beta.0版本中),您如何确定当前活动路由是什么？

我正在开发一个使用Bootstrap 4的应用程序,当我们的关联组件显示在< router-output>中时,我需要一种方法将导航链接/按钮标记为活动状态.标签.

我意识到,当点击其中一个按钮时,我可以自己维护状态,但这不会涵盖将多条路径放入同一路径的情况(例如主导航菜单以及主要组件中的本地菜单) ).

任何建议或链接将不胜感激.谢谢.

解决方法:

使用新的Angular router,您可以为所有链接添加[routerLinkActive] =“[‘your-class-name’]”属性：

<a [routerLink]="['/home']" [routerLinkActive]="['is-active']">Home</a>

或者,如果只需要一个类,则为简化的非数组格式：

<a [routerLink]="['/home']" [routerLinkActive]="'is-active'">Home</a>

有关详细信息,请参阅poorly documented routerLinkActive directive. (我通常通过反复试验来解决这个问题.)

更新：现在可以在here找到更好的routerLinkActive指令文档.(感谢@Victor Hugo arango A.在下面的评论中.)