问题标签 [routerlinkactive]

我正在使用 devextreme 数据网格。我有下一个代码：

每当我单击一行时，它都会按预期工作，但是当键盘导航（向上和向下）selectedRowKeys[]更新时，routerLink 不会触发。

我也有 routerLinkActive 的问题。它不会“突出显示”活动链接。

参考：DxDataGrid：https ://js.devexpress.com/Documentation/ApiReference/UI_Widgets/dxDataGrid/Methods/?version=14_1#getSelectedRowsData

路由器：https ://angular.io/guide/router

** 如果我将 TS 中的 routerLink 与onSelectionChanged事件一起使用，效果会很好，但我不知道如何使用 TS 中的 routerLinkActive

有没有办法提供对ContentChildren里面的访问ng-template？

如果您查看示例，您会看到问题 - 该指令在第二行routerLinkActive中没有看到任何指令。routerLink

要了解routerLinkActive指令的工作原理，您可以查看代码

我的导航栏包含 3 个项目：2 次<li>带有一个<a>元素和一个下拉 btn-group。当遵循导航链接下拉选项之一时，我想突出显示下拉切换按钮。这是我的代码：

我想根据下拉菜单项的 routerLinks 之一是否处于活动状态来更改按钮的样式。但是，由于按钮本身不包含任何路由信息，并且菜单没有自己的父页面，因此我在互联网上找到的解决方案对我来说还不起作用。

• 如您所见，简单地将 routerLinkActive="active-link" 添加到按钮元素是行不通的。
• 添加routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}"到父 btn-group 有效，但不能帮助我动态设置按钮本身的样式。（来源：https ://angular.io/api/router/RouterLinkActive ）
• 目前，RouterLinkActive 样式适用于<li> nav-item元素和下拉项。我只想将它添加到<button>元素中。

有谁知道解决方法？或者我应该接受不能使用RouterLinkActive直接设置按钮的样式吗？

如果您需要进一步说明或我的 .scss 文件，请发表评论。

我遇到了一个有线问题，我有一个有角度的材质侧边栏，并且我有用于路由应用程序的按钮让我把代码放在下面

所以我在css文件中使用具有应用默认样式的按钮，如下所示

下面是我想在 routerLink 处于活动状态时应用的样式

但是选定的样式没有得到应用我尝试了各种技巧来应用它，但无法像使用 routerLinkActive #rla="routerLinkActive" 并在 ngclass 等中应用该条件等

但是我开始看到如果我删除默认样式它会起作用的特殊行为......！！！

我不知道原因，但如果我删除默认按钮样式，它会起作用。

所以任何人都可以帮助我弄清楚这个解决方案到底需要什么，因为我搜索了类似的帖子，但没有一个对我有用..!!

当路由加载时，它不会应用“活动”类，但只有在我更改路由之后。我正在使用最新的 Angular 版本。

当我第一次加载所有者 html 时，底部栏从所有者 ts 文件中获取链接，并应标记（绿色）活动路线，但由于某种原因，它仅在我通过路线后才会发生（在底部栏中）

底栏.component.ts

*管理员路由.module.ts

所有者路由.module.ts

owner.component.ts

owner.component.html

这是当前的路由器设置，它工作正常。这是路径下的延迟加载模块search

所以网址变成了如下...... search/all search/web search/guides search/user search/books

现在我收到了一个删除 '/all' 的请求，只保留了 url，search所以我将其更改为：

它工作......除了 routerLinkActive 指令没有像我期望的那样工作......

rla.isActive不管用？

这是我的问题—— 我创建了一个带有 RouterLink 指令的导航栏，我希望我的导航链接对当前的 URL 路径处于活动状态，所以我使用的是 RouterLinkActive 指令。但是我的 CSS 活动类没有更新到任何 URL 路径。我不知道为什么。这个问题有什么解决办法吗？

这是我的代码

导航栏：app.component.html

要应用的 CSS：app.component.css

路由路径：app.routing.module.ts

我尝试了 [routerLinkActiveOptions]="{exact: true}"仍然没有任何变化，并且我尝试将我的活动 css 类设置为全局仍然没有。我在这里错过什么了吗？

下面的网络链接演示了 routerLinkActive id 在用作不同 HTML 元素的布尔值时的工作情况 [ngClass]
https://stackblitz.com/edit/routerlinkactivesimple?file=src%2Fapp%2Fapp.module.ts

相比之下，routerLinkActive id 不适用于 web-link 下面的 @angular/material 实例，但通过注释第 5 行和第 6 行错误消失了，但没有纠正 routerLinkActive id 的可用性： https ://stackblitz.com/edit/mat -routerlinkactive?file=src%2Fapp%2Fnav%2Fnav.component.html

我的项目有一个子导航，每个子导航都有不同的侧导航。我正在使用 Clarity Angular 框架。导航是动态的。我遇到的问题是，对于不是列表中第一个的子导航（在这种情况下，现在只有一个），sidenav 链接不会保持活动状态；这是因为它在 Keeper 子导航中查找路径“护理人员”，但是当我进入“事务”选项卡或“代理”选项卡时，该链接不再处于活动状态。知道如何解决这个问题吗？下面是我的代码： subnav 模板

子导航组合

子导航界面

侧导航模板

侧导航组合

侧导航界面

主导航界面

app.routing 组件

链接未突出显示：

链接突出显示：

有没有办法做这样的事情：

Img src 应该取决于链接是否完全处于活动状态。如果活动 pic_active 应该显示，如果不是活动 pic-inactive 应该显示。我怎样才能使这项工作？我是 vue 的初学者，我一直在寻找几个小时......

谢谢！