0

我的导航栏包含 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>

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

4

1 回答 1

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>
于 2020-03-31T15:12:46.527 回答