当子链接为 routerLinkActive 时，Angular 7 使父级处于事件状态

Question

如果子链接是 routerLinkActive，我试图让 h2 具有“事件”类。

如果查看:Angular 6 - How do I set a Parent Menu Item To Active using routerLinkActive When Clicking on Its Child Menu Item?

和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 有奇怪的行为，而且他们似乎在每个新版本中不断改变它——你试过这种方式吗？