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

Question

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

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

我想根据下拉菜单项的 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

再会！在您的情况下，问题是按钮没有路由器链接指令，它无法处理路由器事件并确定 - 它是当前路由还是否。解决方案是获取所需路由器链路的引用并在另一个地方（您想要的地方）使用它。检查这个非常基本的例子来了解这个想法：<li class="menu-item" [class.menu-item--active]="dashboardLinkRef.isActive">&nbsp; <a routerLink="/dashboard" routerLinkActive #dashboardLinkRef="routerLinkActive">&nbsp; &nbsp; Dashboard&nbsp; </a></li><!-- Can be multiple refs to router links, that's not a problem ;) --><li class="menu-item" [class.menu-item--active]="loginLinkRef.isActive">&nbsp; <a routerLink="/login" routerLinkActive #loginLinkRef="routerLinkActive">&nbsp; &nbsp; Login&nbsp; </a></li>