下拉切换的样式按钮取决于 nav-link 的 RouterLinkActive

Question

我的导航栏包含 3 个项目：2 次 <li>，带有一个 <a> 元素和一个下拉按钮组。当其中一个 nav-link 下拉选项被选中时，我想突出显示下拉切换按钮。这是我的代码：

<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>

我想根据下拉菜单项的 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 文件，请发表评论..

Answer 1

美好的一天！

你的问题是按钮没有路由器 link 指令，它无法处理路由器事件并确定 - 它是当前路由还是否。解决方案是获取所需路由器的引用 link 并在另一个地方（你想要的地方）使用它。

查看这个非常基本的示例以了解思路：

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

<!-- Can be multiple refs to router links, that's not a problem ;) -->
<li class="menu-item" [class.menu-item--active]="loginLinkRef.isActive">
  <a routerLink="/login" routerLinkActive #loginLinkRef="routerLinkActive">
    Login
  </a>
</li>

下拉切换的样式按钮取决于 nav-link 的 RouterLinkActive

Style button of dropdown toggle depending on RouterLinkActive of nav-link

html

css

angular

routing

routerlinkactive