为导航链接添加活动类

Question

如果有任何子菜单处于活动状态，我需要在父导航项内的 .nav-link 中添加一个活动类。

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

如果 div.collapse 中的任何 .nav-link 有一个活动类， 应将活动类添加到父导航项内的导航链接

Answer 1

您可以为每个链接创建一个模板变量，然后使用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>

Answer 2

您可以使用routerActiveLink 的isActive 属性，然后在父元素上使用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>

Answer 3

使用@T.Shashwat 的想法。你声明 ViewChildren 和一个 getter

@ViewChildren('rla') links:QueryList<routerLinkActive>
get isActive(){
   return this.links?this.links.find(x=>x.isActive)!=null:false
}