下拉按钮的样式按钮取决于导航链接的RouterLinkActive

Question

[我的导航栏]包含3个项目：2倍<li>和一个<a>元素以及一个下拉btn-group。当要跟随导航链接下拉选项之一时，我想突出显示下拉切换按钮。这是我的代码：

<ul class="navbar-nav mx-auto h-100 navigation-items">
  <li class="nav-item active">
    <a
      [routerLink]="['/app', 'tab1']"
      routerLinkActive="active-link"
      class="nav-link h-100"
      >Tab1</a
    >
  </li>

  <div class="btn-group dropdown" dropdown>
    <button
      class="btn btn-link nav-link h-100 dropdown-toggle"
      id="button-basic"
      dropdownToggle
      type="button"
-->      routerLinkActive="active-link"   <--- Doesn't work
    >
      Dropdown
      <fa-icon [icon]="faChevronDown" size="xs"></fa-icon>
    </button>
    <ul
      id="dropdown-basic"
      *dropdownMenu
      class="dropdown-menu main-nav"
      role="menu"
      aria-labelledby="button-basic"
    >
      <li role="menuitem">
        <a
          class="dropdown-item"
          [routerLink]="['/app', 'tab2', 'link1']"
          routerLinkActive="active-link"
          >Link1
        </a>
      </li>
      <li role="menuitem">
        <a
          class="dropdown-item"
          data-letter=""
          [routerLink]="['/app', 'tab2', 'link2']"
          routerLinkActive="active-link"
          >Link2
        </a>
     </li>
      <li role="menuitem">
        <a
          class="dropdown-item"
          [routerLink]="['/app', 'tab2', 'link3']"
          routerLinkActive="active-link"
          >Link3
        </a>
      </li>
    </ul>
  </div>

  <li class="nav-item active" fxLayoutAlign="center center">
    <a
      [routerLink]="['/app', 'tab3']"
      title="Inplannen"
      routerLinkActive="active-link"
      class="nav-link h-100"
      >Tab3</a
    >
  </li>
</ul>

我想根据下拉菜单项的routerLink之一是否处于活动状态来更改按钮的样式。但是，由于按钮本身不包含任何路由信息，并且菜单本身没有父页面，因此我在Internet上找到的解决方案对我而言仍然无效。

• 如您所见，仅将routerLinkActive =“ active-link”添加到按钮元素是行不通的。
• 将routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}"添加到父btn-group可以，但是并不能帮助我动态设置按钮本身的样式。 （来源：https://angular.io/api/router/RouterLinkActive）
• 当前，RouterLinkActive样式在<li> nav-item元素和下拉项上正常工作。我只想将其添加到<button>元素。

有人知道解决方法吗？还是我接受不能使用RouterLinkActive直接设置按钮样式？

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

Answer 1

美好的一天！

在您的情况下，该按钮没有路由器链接指令，无法处理路由器事件并无法确定-是当前路由还是否。解决方案是获取所需路由器链接的参考，并在其他地方（您需要的地方）使用它。

检查此非常基本的示例以了解主意：

<li class="menu-item" [class.menu-item--active]="dashboardLinkRef.isActive">
  <a routerLink="/dashboard" routerLinkActive #dashboardLinkRef="routerLinkActive">
    Dashboard
  </a>
</li>