установка класса для родителя активной ссылки на маршрутизатор, Angular 2+

Question

У меня есть панель навигации с начальной загрузкой 4 с раскрывающимся списком, раскрывающийся список содержит маршруты, и я могу заставить их отображаться активными, основываясь на 'routerLinkActive', но я также хочу стилизовать 'dropdown-toggle' или 'nav-item'активным, когда один из его дочерних элементов является активным маршрутом.

Как мне поступить?

Вот небольшой фрагмент кода, я попытался очистить его для удобства чтения

<li *ngFor="let menuItem of MenuItems; index as i" [id]="i" class="nav-item dropdown" ngbDropdown>

  <a class="nav-link dropdown-toggle" ngbDropdownToggle>
    {{menuItem.title}}
  </a>

  <!-- dropdown menu -->
  <div *ngIf="menuItem.submenu.length > 0" class="dropdown-menu" ngbDropdownMenu aria-labelledby="i">
    <div *ngFor="let menuSubItem of menuItem.submenu">
        <a  [routerLink]="menuSubItem.path"
            [routerLinkActive]="['active-sub']" <== ** this part works and sets the class, now i need the top nav-link to be active too
            [routerLinkActiveOptions]="{exact: true}" 
            class="dropdown-item">
            {{menuSubItem.title}}
        </a>
    </div>
  </div>

</li>

Answer 1

Вы можете использовать routerLinkActive шаблон ссылки следующим образом:

<li [ngClass]="{'active-class': rlRef.isActive}">
  <a [routerLink]="['/your-route']" routerLinkActive="active" #rlRef="routerLinkActive">Fancy URL</a>
<li>