我有这个导航视图，使用MatSidenavModule。我面临的问题是在移动的屏幕上，当我点击mat-list-item时，mat-sidenav按预期关闭，但当我打开mat-sidenav时，总是列表中的第一个项目被材料标记为活动。如果我使用div，它会按预期工作（红色）。问题是当我使用mat-list-item。我不知道我做错了什么。提前感谢。

<mat-sidenav-container [hasBackdrop]="false">

    <mat-sidenav 
        #sidenav [mode]="windowInnerWidth > 1200 ? 'side' : 'push'" 
        [opened]="windowInnerWidth > 1200 ? true : false" 
        >
        <div class="mat-typography">
            <h2>Material</h2>
        </div>
        <mat-divider></mat-divider>
        <mat-nav-list>

            <!-- it does not work -->
            <mat-list-item 
                *ngFor="let menuItem of menuItems"
                [routerLink]="[menuItem.path]"
                routerLinkActive="router-active"
                (click)="windowInnerWidth < 1200 ? sidenav.close() : null">
                <span matListItemTitle>{{menuItem.title}}</span>
            </mat-list-item>

            <!-- it works -->
            <div *ngFor="let menuItem of menuItems"
                [routerLink]="[menuItem.path]"
                routerLinkActive="router-active"
                (click)="windowInnerWidth < 1200 ? sidenav.close() : null">
                {{menuItem.title}}
            </div>
        </mat-nav-list>
    </mat-sidenav>

    <mat-sidenav-content>
        <app-toolbar [windowInnerWidth]="windowInnerWidth" (toggleEvent)="toggleSidenav()"></app-toolbar>
        <div class="router-outlet-container">
            <router-outlet></router-outlet>
        </div>     
    </mat-sidenav-content>
  
</mat-sidenav-container>

.router-active {
    color: red;
}