Кнопка стиля раскрывающегося списка переключается в зависимости от RouterLinkActive навигационной ссылки

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

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

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

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