javascript - 在Angular中，您如何确定活动路线？(In Angular, how do you determine the active route?)

Question

NOTE: There are many different answers here, and most have been valid at one time or another.(注意： 这里有许多不同的答案，大多数都是有效的。)

The fact is that what works has changed a number of times as the Angular team has changed its Router.(事实是，当Angular团队改变其路由器时，有效的改变了很多次。) The Router 3.0 version that will eventually be the router in Angular breaks many of these solutions, but offers a very simple solution of its own.(最终将成为 Angular路由器的Router 3.0版本打破了许多这些解决方案，但它提供了一个非常简单的解决方案。) As of RC.3, the preferred solution is to use [routerLinkActive] as shown in this answer .(从RC.3开始，首选解决方案是使用[routerLinkActive] ，如本答案中所示。) In an Angular application (current in the 2.0.0-beta.0 release as I write this), how do you determine what the currently active route is?(在Angular应用程序中（当我写这篇文章时，目前在2.0.0-beta.0版本中），您如何确定当前活动路由是什么？) I'm working on an app that uses Bootstrap 4 and I need a way to mark navigation links/buttons as active when their associated component is being shown in a <router-output> tag.(我正在开发一个使用Bootstrap 4的应用程序，当我们的关联组件显示在<router-output>标签中时，我需要一种方法将导航链接/按钮标记为活动状态。) I realize that I could maintain the state myself when one of the buttons is clicked upon, but that wouldn't cover the case of having multiple paths into the same route (say a main navigation menu as well as a local menu in the main component).(我意识到，当点击其中一个按钮时，我可以自己维护状态，但这不会涵盖将多条路径放入同一路径的情况（例如主导航菜单以及主要组件中的本地菜单） ）。) Any suggestions or links would be appreciated.(任何建议或链接将不胜感激。) Thanks.(谢谢。)   ask by Michael Oryl translate from so

Answer 1

With the new Angular router , you can add a [routerLinkActive]="['your-class-name']" attribute to all your links:(使用新的Angular路由器 ，您可以为所有链接添加[routerLinkActive]="['your-class-name']"属性：)

<a [routerLink]="['/home']" [routerLinkActive]="['is-active']">Home</a> Or the simplified non-array format if only one class is needed:(或者，如果只需要一个类，则为简化的非数组格式：) <a [routerLink]="['/home']" [routerLinkActive]="'is-active'">Home</a> Or an even simpler format if only one class is needed:(或者如果只需要一个类，则更简单的格式：) <a [routerLink]="['/home']" routerLinkActive="is-active">Home</a> See the poorly documented routerLinkActive directive for more info.(有关详细信息，请参阅记录不routerLinkActive指令 。) (I mostly figured this out via trial-and-error.)(（我通常通过反复试验来解决这个问题。）) UPDATE: Better documentation for the routerLinkActive directive can now be found here .(更新：现在可以在此处找到更好的routerLinkActive指令文档。) (Thanks to @Victor Hugo Arango A. in the comments below.)(（感谢@Victor Hugo Arango A.在下面的评论中。）)