Добавление активного класса для nav-link - PullRequest
Новая
       13

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

0 голосов
/ 15 октября 2018

Мне нужно добавить активный класс к .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

Ответы [ 2 ]

0 голосов
/ 15 октября 2018

Вы можете использовать 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>
0 голосов
/ 15 октября 2018

Вы можете создать переменную шаблона для каждой ссылки, а затем назначить класс, используя 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>
...