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

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

我的导航栏包含 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 直接设置按钮样式?

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

美好的一天!

你的问题是按钮没有路由器 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>