问题标签 [routerlinkactive]

当 div 中的一条路由处于活动状态时，我想在 div 上设置一个类。当我将带有 routerLink 指令的链接直接放在 div 中时，这与 routerLinkActive 指令一起工作得很好：

但是，当我将链接重构为单独的组件时，不再设置“活动组”类：

我在这里创建了一个 StackBlitz 来演示这个问题：https ://stackblitz.com/edit/routerlinkactive?file=src/app/app.component.ts

任何帮助，将不胜感激！

我有一个包含多个像这样的侧边栏项目的侧边栏

侧边栏项目有这样的路由器链接

路由器配置有linkExactActiveClass: 'active',

我应该怎么做才能在此处设置活动侧边栏项目的样式

这一切都在标题中，我希望我的菜单的第一项采用“主要”风格的棱角材料。这是我的代码，仅在我单击菜单项时才有效

我怎样才能做到这一点 ？谢谢

我正在尝试实现一个有条件的 routerLinkActive 类，但如果变量正在更改，则不会删除该类：

我在这里想念什么？

我有一个带有图标的底部导航栏。当路由器链接具有“活动”类时，它怎么会变成活动图标？默认图标 1 处于活动状态。

（Angular 13 应用程序）我的导航栏上有一些下拉菜单，我想在触发 routerLinkActive 时设置它们的样式。当在导航下拉列表中单击下拉项目之一时，我希望它添加一个 .active 类（此处未显示 .active css，但我保证它存在）。

下面的代码显示了 2 个下拉菜单，但还有更多。所以对于报告（这是导航栏上的第四个下拉菜单，而不是第一个），一切正常。如果我单击 test3，下拉标题“报告”将获得 .active css。但是，为了准备好（或任何其他下拉菜单），只有下拉菜单中的第一项会触发 .active css 应用于标题。

那么 Report 和 Readiness 之间有什么区别可以使它完美地适用于 Report 但不适用于 Readiness 呢？（代码下方的更多信息）

帮助诊断的更多信息：

1. 当我完全复制报告时，它可以工作（但会将活动标签添加到两个导航标题，因为它们是完全相同的代码）
2. 如果我对重复的代码进行任何更改，它就会停止工作或做一些奇怪的事情，例如：a）将 .active 样式添加到随机标题 b）将 .active 样式添加到原始报告标题，但不添加到当前标题 c ) 将 .active 样式添加到原始和重复的报告标题中
3. 我尝试更改ID，它根本没有帮助。
4. 我尝试将链接引用的名称（例如#reportLinkRef）更改为非常不同的名称，例如“TestRef”或“qwerty”。只是随机的，非常不同的名字。但这没有帮助。
5. 我尝试更改导航栏下拉菜单的顺序。没有改变。
6. 我尝试从导航栏中删除整个“报告”下拉列表，以查看其他下拉列表是否会开始工作，但即使“报告”消失了，它们也不起作用。
7. 我想这可能与 routerLink 是“test/test1”而不仅仅是“test1”有关，但其他下拉菜单有“admin/admin1”，它们也不起作用。
8. 我尝试单击“准备就绪”下的一个，然后单击一个完全不同的选项，然后返回“准备就绪”，没有任何反应。9）如果点击Readiness下的第一个选项（item1），readiness会得到.active类。但是，如果我单击任何其他选项（item2、item3）或另一个下拉列表（test1 ....），则 .active 类将被删除。同样，报告不会发生这种情况；test1、test2、test3 都会触发 Reports 具有 .active 类。
9. 我尝试重新启动应用程序、重新启动 Visual Studio 并重新启动计算机。
10. 我试过清除缓存。