Angular 7当子链接为routerLinkActive时，使父主题活动

Question

如果子链接为routerLinkActive，我试图使h2具有“活动”类。

如果查看： Angular 6-当单击其子菜单项时，如何使用routerLinkActive将父菜单项设置为Active？

和https://angular.io/api/router/RouterLinkActive

但都没有帮助吗？

我的代码：

        <ng-container *ngFor="let item of nav.Navigation.MenuItem; let r = index">
            <div class="navGroup" *hasClaim="item.Claim">
                <h2 class="acc_trigger" [class.active]="isActive" (click)="navSelect(item, $event)" ><span class="fas {{item.icon}}"></span>{{item.Text}}</h2>
                <ng-container *ngIf="item.MenuItem != null">
                    <div class="acc_container" >
                        <ul class="ulNav">
                            <li *ngFor="let nav of item.MenuItem"><a [routerLink]="nav.Url" routerLinkActive="active-link" >{{nav.Text}}</a></li>
                        </ul>
                    </div>
                </ng-container>
            </div>
        </ng-container>

Answer 1

根据文档，它说您应该能够将routerLinkActive放在要查找的链接的任何祖先（包括子菜单链接列表）上，因此只需将routerLinkActive添加到navGroup ：

<ng-container *ngFor="let item of nav.Navigation.MenuItem; let r = index">
    <div class="navGroup" *hasClaim="item.Claim" routerLinkActive="active">
        <h2 class="acc_trigger" (click)="navSelect(item, $event)" ><span class="fas {{item.icon}}"></span>{{item.Text}}</h2>
        <ng-container *ngIf="item.MenuItem != null">
            <div class="acc_container" >
                <ul class="ulNav">
                    <li *ngFor="let nav of item.MenuItem"><a [routerLink]="nav.Url" routerLinkActive="active-link" >{{nav.Text}}</a></li>
                </ul>
            </div>
        </ng-container>
    </div>
</ng-container>

使您的h2风格更像

.navGroup.active>h2 { /* some styles for your active h2 */ }

应该使它工作。 尽管我已经看到很多抱怨routerLinkActive行为异常，并且它们似乎在每个新版本中都在不断更改-您是否尝试过这种方法？