Добавление активного класса для nav-ссылки

Мне нужно добавить активный класс к.nav-ссылке внутри родительского элемента nav, если какое-либо из подменю активно.

<ul>
    <li class="nav-item">
        <a class="nav-link" (click)="BEDropdownOpen = !BEDropdownOpen" [attr.aria-expanded]="BEDropdownOpen"
            aria-controls="basic-elements-dropdown">
            Elements
        </a>
        <div class="collapse" id="basic-elements-dropdown" [ngbCollapse]="!BEDropdownOpen">
            <ul class="nav flex-column sub-menu">
                <li class="nav-item">
                    <a class="nav-link" routerLink="/accordions" routerLinkActive="active">Accordion</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" routerLink="/typography" routerLinkActive="active">Typography</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" routerLink="/tooltips" routerLinkActive="active">Tooltip</a>
                </li>
            </ul>
        </div>
    </li>
</ul>

Если какая-либо из.nav-ссылок внутри div.collapse имеет активный класс, активный класс должен быть добавлен к nav-ссылке внутри родительского nav-элемента

Источник

3 ответа

Решение

Вы можете создать переменную шаблона для каждой ссылки, а затем назначить класс, используя ngClass вот так:

<ul>
    <li class="nav-item">
        <a
           class="nav-link"
           (click)="BEDropdownOpen = !BEDropdownOpen"
           [attr.aria-expanded]="BEDropdownOpen"
           [ngClass]="{'active': accordionLink.isActive || typographyLink.isActive || tooltipLink.isActive}"
           aria-controls="basic-elements-dropdown">Elements
        </a>
        <div class="collapse" id="basic-elements-dropdown" [ngbCollapse]="!BEDropdownOpen">
            <ul class="nav flex-column sub-menu">
                <li class="nav-item">
                    <a class="nav-link" routerLink="/accordions" routerLinkActive="active" #accordionLink="routerLinkActive">Accordion</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" routerLink="/typography" routerLinkActive="active" #typographyLink="routerLinkActive">Typography</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" routerLink="/tooltips" routerLinkActive="active" #tooltipLink="routerLinkActive">Tooltip</a>
                </li>
            </ul>
        </div>
    </li>
</ul>
Источник

Ты можешь использовать isActive собственностью routerActiveLink а затем использовать ngClass на родительском элементе.

<ul>
    <li class="nav-item">
        <a class="nav-link" (click)="BEDropdownOpen = !BEDropdownOpen" [attr.aria-expanded]="BEDropdownOpen" aria-controls="basic-elements-dropdown"   [ngClass]="{'active': rla.isActive}">
            Elements
        </a>
        <div class="collapse" id="basic-elements-dropdown" [ngbCollapse]="!BEDropdownOpen">
            <ul class="nav flex-column sub-menu">
                <li class="nav-item">
                    <a class="nav-link" routerLink="/accordions" routerLinkActive="active" #rla="routerLinkActive">Accordion</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" routerLink="/typography" routerLinkActive="active" #rla="routerLinkActive" >Typography</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" routerLink="/tooltips" routerLinkActive="active" #rla="routerLinkActive">Tooltip</a>
                </li>
            </ul>
        </div>
    </li>
</ul>
Источник

Используя идею @T.Shashwat. Вы объявляете ViewChildren и геттер

      @ViewChildren('rla') links:QueryList<routerLinkActive>
get isActive(){
   return this.links?this.links.find(x=>x.isActive)!=null:false
}
Источник
Другие вопросы по тегам