0

我的应用程序中有一个mat-nav-list在左侧显示菜单。我已经添加routerLinkActive="selected-item"到它以突出显示当前选择的菜单项。

每当单击菜单项时，都不会应用该类。只有在我单击页面中的其他位置后才会应用它。

以下是我的代码片段：

<mat-nav-list (click)="menuItemClicked()" class="menu-list">
    <a  *ngFor="let menuItem of menuItems" mat-list-item
        [routerLink]="menuItem.routerLink" routerLinkActive="selected-item">

        <mat-icon [svgIcon]="menuItem.icon" matListIcon></mat-icon>
        <span>{{ menuItem.label }}</span>
    </a>
</mat-nav-list>

.selected-item {
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
    background-color: #f47431;
}

这是重现该问题的 Stackblitz：https ://stackblitz.com/edit/angular-wuabhz?file=src/app/list-single-selection-example.html

选择其中一个启动项并单击其他位置，您将看到该类selected-item被应用。

有没有办法克服这个问题或者我错过了什么？

4

0 回答 0