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. The Router 3.0 version that will eventually be 103 router in Angular breaks many of these solutions, but offers a very simple solution of its own. As of RC.3, the preferred solution is to use 101 as shown in 100.

在Angular 应用程序(在我 compose 本文时,当前版本为2.0.0-Beta.0)中,您如何确定当前活动的路由是什么?

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

我意识到,当点击其中一个按钮时,我自己可以保持这种状态,但这不包括有多条路径进入同一条路由的情况(比如主导航菜单以及主组件中的本地菜单).

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

推荐答案

使用新的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中找到.(在下面的 comments 中感谢@Victor Hugo Arango A.)

Javascript相关问答推荐

我无法使用tailwind-css和reactJS修改图像的位置

如何解决(不忽略)reaction详尽的linter规则,而不会在获取数据时导致无限的reender循环

基于每个索引迭代嵌套对象

通过使用100%间隔时间来代表我们还剩多少时间来倒计时

zoom svg以适应圆

过滤对象数组并动态将属性放入新数组

D3 Scale在v6中工作,但在v7中不工作

将字符串UTC Date转换为ngx—counting leftTime配置值的数字

构造HTML表单以使用表单数据创建对象数组

Use Location位置成员在HashRouter内为空

获取';无法解决导入和导入";slick-carousel/slick/slick-theme.css";';错误

当标题被点击时,如何使内容出现在另一个div上?

按什么顺序接收`storage`事件?

打字脚本中方括号符号属性访问和拾取实用程序的区别

如何使本地html页面在重新加载时保持当前可隐藏部分的打开状态?

当我点击一个按钮后按回车键时,如何阻止它再次被点击

如何使用抽屉屏幕及其子屏幕/组件的上下文?

使用Reaction窗体挂钩注册日历组件

如何在AG-Grid文本字段中创建占位符

为什么NULL不能在构造函数的.Prototype中工作