javascript - 在 Angular 中，如何确定事件路由？

Question

注意: 这里有很多不同的答案，而且大多数都曾经有效。事实是，随着 Angular 团队改变了它的路由器，有效的方法已经改变了很多次。最终将成为 Angular 中 the 路由器的路由器 3.0 版本打破了许多这些解决方案，但提供了一个非常简单的解决方案。从 RC.3 开始，首选的解决方案是使用 [routerLinkActive]如this answer所示.

在 Angular 应用程序中(在我撰写本文时，当前版本为 2.0.0-beta.0)，您如何确定当前事件的路由是什么？

我正在开发一个使用 Bootstrap 4 的应用程序，我需要一种方法来将导航链接/按钮标记为事件，当它们的相关组件显示在 <router-output> 中时标记。

我意识到当单击其中一个按钮时我可以自己维护状态，但这不包括有多个路径进入同一路径的情况(比如主导航菜单和本地菜单)主要成分)。

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

Answer 1

使用新的 Angular router ，您可以为所有链接添加 [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>

见 poorly documented routerLinkActive directive了解更多信息。 (我主要是通过反复试验来解决这个问题的。)

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