当以角度方式选择任一菜单时，我想突出显示工具栏中的按钮

Question

我已经实现了一个具有不同按钮的工具栏，这些按钮触发菜单，其中也有带有 routerLink 的按钮。当在 Angula 中选择任一菜单时，我想突出显示工具栏中的按钮。

考虑下面的代码。我希望员工按钮仅在单击按钮列表或在菜单中单击添加员工按钮时突出显示。

HTML-

<button mat-button [matMenuTriggerFor]="employeeMenu"  routerLinkActive="active">Employee</button>
    <mat-menu #employeeMenu [overlapTrigger]="false" yPosition="below">
      <button mat-menu-item routerLink="/employee/employeesList">
        <mat-icon>list</mat-icon>
        <span>List</span>
      </button>
      <button mat-menu-item routerLink="/employee/addEmployee">
        <mat-icon>edit</mat-icon>
        <span>Add Employee</span>
      </button>
    </mat-menu>

我尝试在按钮员工中使用 routerLinkActive 以及 routerLink="employee" 但即使我没有单击菜单按钮，按钮员工也会在单击时突出显示。

Answer 1

我想通了！ 这是代码-

<button mat-button [matMenuTriggerFor]="employeeMenu"  routerLinkActive="active" [ngClass]="{'active': list.isActive || addEmp.isActive }">Employee</button>
    <mat-menu #employeeMenu [overlapTrigger]="false" yPosition="below">
      <button mat-menu-item routerLink="/employee/employeesList" routerLinkActive #list="routerLinkActive">
        <mat-icon>list</mat-icon>
        <span>List</span>
      </button>
      <button mat-menu-item routerLink="/employee/addEmployee" routerLinkActive #addEmp="routerLinkActive">
        <mat-icon>edit</mat-icon>
        <span>Add Employee</span>
      </button>
    </mat-menu>

仅当选择列表中的任何内容时，该选项卡才会突出显示，而不是单击时。