下拉切换的样式按钮取决于 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">

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