多个RouterLinkActive同时触发CSS类

Question

为了使用routerLink，我使用了多个<a>标签。当我第一次加载我的主页时，由于routerLinkActive，主页图标(在aMenuItems中)有active类，而数组的其余部分aMenuItems没有。这是一种良好的行为。

但是，bottom-group中的两个<a>标记都将active类作为主页图标触发。我尝试将routerLinkActiveOptions中的属性exact设置为true，但没有任何更改。一旦我选择了主页以外的其他页面，这个bug就消失了。

HTML：

<div class="top-group">
    <a
        *ngFor="let oItem of aMenuItems"
        class="menu-item"
        [routerLink]="oItem.link"
        routerLinkActive="active"
        [routerLinkActiveOptions]="{ exact: true }"
    >
        <mat-icon>{{oItem.icon}}</mat-icon>
        <p>
            {{oItem.designation}}
        </p>
    </a>
</div>
<div class="bottom-group">
    <a
        class="menu-item"
        [routerLink]="routerLinkMarketPlace"*
        routerLinkActive="active"
        [routerLinkActiveOptions]="{ exact: true }"
    >
        <mat-icon>apps</mat-icon>
        <p>applications</p>
    </a>
    <a
        class="menu-item"
        [routerLink]="routerLinkSettings"
        routerLinkActive="active"
        [routerLinkActiveOptions]="{ exact: true }"
    >
        <mat-icon>settings</mat-icon>
        <p>paramètres</p>
    </a>
</div>

Answer 1

我找到了我的问题的解决方案：

在HTML语言中，我使用路由器中的isActive属性将routerLinkActive替换为类条件。

    <a
        class="menu-item"
        [routerLink]="routerLinkSettings"
        [class.active]="router.isActive(routerLinkSettings)"
        [routerLinkActiveOptions]="{ exact: true }"
    >
        <mat-icon>settings</mat-icon>
        <p>parameters</p>
    </a>

您还需要在.ts中插入路由器

    constructor(private router: Router) {
        super();
    }

希望它能帮助路过的人！