angular - 在 Angular 中单击时激活 mat-list-item

Question

我有一个带有以下代码的 mat-nav-list：

<a mat-list-item routerLinkActive="list-item-active" routerLink="/dashboard">
  <mat-icon>dashboard</mat-icon> Dashboard
</a>
<mat-list-item (click)="showSubmenu = !showSubmenu" routerLinkActive="list-item-active" routerLink="/department" class="parent">
            <span class="full-width" *ngIf="isExpanded || isShowing">Department</span>
            <mat-icon mat-list-icon>layers</mat-icon>
            <mat-icon class="menu-button" [ngClass]="{'rotated' : showSubmenu}" *ngIf="isExpanded || isShowing">expand_more</mat-icon>
</mat-list-item>
<div class="submenu" [ngClass]="{'expanded' : showSubmenu}" *ngIf="isShowing || isExpanded">
            
    <mat-list-item (click)="showSubSubMenu = !showSubSubMenu" class="parent">
        <span class="full-width" *ngIf="isExpanded || isShowing">Human Resource</span>
        <mat-icon mat-list-icon>people</mat-icon>
        <mat-icon class="menu-button" [ngClass]="{'rotated' : showSubSubMenu}" *ngIf="isExpanded || isShowing">expand_more</mat-icon>
    </mat-list-item>
    <div class="submenu" [ngClass]="{'expanded' : showSubSubMenu}" *ngIf="isShowing || isExpanded">
        <a mat-list-item routerLinkActive="list-item-active" routerLink="/department/hr/visa_pp">
            <mat-icon>insert_drive_file</mat-icon>Visa / Passport 
        </a>
    </div>
</div>

输出：

在这里，我想在点击时激活“部门”nav-lit-item。我没有要为部门显示的页面。

谢谢