Кнопка стиля раскрывающегося списка в зависимости от RouterLinkActive от nav-link

Question

Мой Navbar содержит 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>

  <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 пунктов выпадающего меню. Однако, поскольку сама кнопка не содержит никакой информации о маршрутизации, а меню не имеет собственной родительской страницы, решения, которые я нашел в inte rnet, у меня пока не сработали.

• Как видите, простое добавление routerLinkActive = "active-link" к элементу кнопки не работает.
• Добавление routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}" в родительскую группу btn работает, но не помогает я динамически стиль самой кнопки. (источник: https://angular.io/api/router/RouterLinkActive)
• В настоящее время стиль RouterLinkActive отлично работает с элементами <li> nav-item и выпадающими элементами. Я только хочу добавить его к элементу <button>.

Кто-нибудь знает обходной путь? Или я должен согласиться с тем, что невозможно напрямую стилизовать кнопку с помощью RouterLinkActive?

Если вам нужны дополнительные разъяснения или мой файл .s css, пожалуйста, прокомментируйте ..

Answer 1

Добрый день!

Проблема в вашем случае в том, что кнопка не имеет директивы маршрутизатора, она не может обрабатывать события маршрутизатора и определяет - это текущий маршрут или нет. Решение состоит в том, чтобы получить ссылку на нужную ссылку маршрутизатора и использовать ее в другом месте (где вы хотите).

Проверьте этот довольно базовый c пример, чтобы получить идею:

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