问题标签 [routerlinkactive]

即使我导航到其他页面，我也想让侧边栏选项突出显示 [routerlinkactive 状态]。所以我有显示在 home 组件中的 sidemenu 组件

侧边菜单组件 html 文件

主页组件 html 文件

路线文件

默认情况下，当我在第一个组件中时，Sidemenu-item-1 将突出显示，但我希望即使当我导航到第二个组件替换第一个组件时，routerlink 活动状态也是相同的。有任何想法吗？

我想在链接处于活动状态时使用routerLinkActive设置 CSS 样式并添加类。我已经尝试过 bootstrap 并且它可以工作，但是当我从前端开发人员那里获得自定义 CSS 时，即使路由 url 与routeLink匹配，它也不会添加声明它处于活动状态的类。

我有点沮丧，不知道出了什么问题。我希望它会在路由处于活动状态时在锚点中添加类menu- active。

这是我的代码：

sidebar.component.html

我已经像下面的代码一样进行了测试，引用自这个问题。我希望i显示，因为 routerlink 处于活动状态，但它没有，即使我在http://localhost:4200/dashboard中。

希望有人能消除我的沮丧。谢谢你。

更新：

当我检查元素时，甚至没有添加该类。这是它的屏幕截图：

我的 routerLinkActive 有问题。

这里有两个GIF来解释。

1. 第一个问题：当我启动应用程序时，没有一个 routerLinkActive 让课程处于活动状态。但如果我点击不同的路线，那最终会奏效。

2. 当我首先单击当前路线时，不显示课程。

这是我的代码：

这是我的路线树。（红色是调用的组件）

和我的路线代码：

和 menuItem 是：

你知道我的问题是什么吗？

编辑：

我努力了：

绝对路线。IE：

和

和

结果是一样的。不工作。

编辑2：

添加：

[routerLinkActiveOptions]="{exact: true}" 到：

不能解决问题。

编辑3：

扩展 Augury 告诉我 routerLink 对于好路由是正确的。但是该类未在 DOM 中激活。

编辑4：

所以，我做了一些探索。

我发现如果我将 menuComponent（侧边栏）放在父根目录中，那是有效的，我会显示活动类（但我不想把它放在父目录中）

编辑5：

我已经对这种情况做了一个检查......而且这个工作很有效......我不明白。

https://plnkr.co/edit/7KMlY2

在登录页面成功登录后，路由更改为“入站”视图，导航栏中有两个选项卡，“入站”和“出站”。我希望已经选择了“入站”导航选项卡以反映路由器的状态。但是，在实现了这个demo之后，它仍然默认没有被选中

html:

零件：

路线：

我的 Angular 4 应用程序有一个导航侧菜单，其中包含 2 个包含子菜单项的折叠项。除非我以编程方式路由到页面，否则菜单的路由可以找到。我可以在源代码中看到正确的菜单项被标记为活动，但它没有展开菜单以显示子菜单项。

导航.componnet.html

应用程序.routes.ts

编辑：我想通了。我需要将 [routerLinkActive]="['in']" 广告添加到 ul。我更新了上面的代码。

我正在处理路由和导航。我正在使用[routerLinkActive]="['active']" 使链接处于活动状态。当我导航到其他路线时，它工作正常。

但是当刷新当前页面时，'routerLinkActive' 不起作用并且没有链接处于活动状态。我需要选择该链接以使其再次处于活动状态。重新加载页面后，有什么方法可以使该链接处于活动状态。

样本：

应用程序路由.ts

home.component.html

任何帮助，将不胜感激。

我有一个带有 [routerLinkActive] 的工作侧菜单，当我单击它们时，它允许我获得一个活动选项卡。但是，我无法加载默认选项卡活动

这是我的 html 文件：

这是我在页面加载时得到的

我希望第二个选项默认处于活动状态，就像在第二张图片中一样，关于如何实现这一点的任何想法？

我正在使用路由并使用 routerLinkActive 使链接处于活动状态。在 html 中使用 ngModel 时链接未激活。

这是确切的场景..

在组件中，我正在调用返回一个对象或对象数组的 Web 服务。在 html 中，我将 ngModel 用于对象的字段。如果我使用字符串或数字等直接字段，路由器链接活动工作正常。但是当我尝试从对象访问字段时它不起作用。

有点奇怪。

这是我想要做的。

ts：

html:

当我在 ngModel 中使用 selectedEntry 时，它工作正常，检索日期后它不起作用。

需要帮忙。

在 *ngFor 循环中，我正在构建带有示例阅读文本的搜索结果列表（垫卡），我希望允许用户单击其中一个以阅读更多内容，并打开到填充的文档模板的路线与正确的文档。

此静态 HTML 与 routerlinkactive 一起使用，以捕获 docview 页面中的参数...

我想通过 *ngFor 将硬编码的 Doc ID 'AW010001' 替换为每次迭代的适当 ID。但是这段代码失败了......

我得到的错误是典型的......

解析器错误：在 [['/docview', {[sDocName]:'{{sDocIDs[i]}}' }]] 的第 25 列预期表达式出现插值 ({{}})

我有一个带有下一个布局的 Angular 单页网站

（其中 pageN_Id 是组件变量）

当我单击标题的链接 pageN 时，窗口将滚动到 pageN（使用页内导航，<a href="#someId">）

现在我想在单击链接时向 a-link 元素添加一个“活动”css-class。

我知道指令routerLink和routerLinkActive，但是如何将它们与页内链接一起使用（而不是简单的页间链接）