0

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

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

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

    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" id="navbarDropdownReadiness" role="button" data-bs-toggle="dropdown" aria-expanded="false"
         [class.active]="readinessLinkRef.isActive">
        Readiness
      </a>
      <ul class="dropdown-menu" aria-labelledby="navbarDropdownReadiness">
        <li><a class="dropdown-item" routerLink="item1" routerLinkActive #readinessLinkRef="routerLinkActive">Item1</a></li>
        <li><a class="dropdown-item" routerLink="item2" routerLinkActive #readinessLinkRef="routerLinkActive">Item2</a></li>
        <li><a class="dropdown-item" routerLink="item3" routerLinkActive #readinessLinkRef="routerLinkActive">item3</a></li>
      </ul>
    </li>

    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"
         [class.active]="reportLinkRef.isActive">
        Reports
      </a>
      <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
        <li><a class="dropdown-item" routerLink="test1" routerLinkActive #reportLinkRef="routerLinkActive">Test1</a></li>
        <li><a class="dropdown-item" routerLink="test/test2/" routerLinkActive #reportLinkRef="routerLinkActive">Test2</a></li>
        <li><a class="dropdown-item" routerLink="test/test3" routerLinkActive #reportLinkRef="routerLinkActive">Test3</a></li>
  
      </ul>
    </li>

帮助诊断的更多信息：

  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. 我试过清除缓存。
4

0 回答 0