关于点击菜单激活功能?

Question

需求: 现在有一个菜单列表, 点击某一个菜单, 给当前菜单添加 .active 类, 并且去除其他所有菜单的 .active 类(如果存在)

我目前的写法存在一些问题, 想问下能不能优化下? 或者用其他更好的方式实现?
以下是我目前实现的代码

layout.component.scss

.active {
  color: #E6F0FA;
  background-color: rgba($color: #E6F0FA, $alpha: .1);
}

layout.component.html

<mat-nav-list class="menus pt-0">
  <mat-list-item *ngFor="let item of menus" [ngClass]="{'active':item.active}" (click)="onMenuClick(item.name)" class="menu">
    <mat-icon class="mr-3">{{ item.icon }}</mat-icon>
    <span>{{ 'CM_' + item.name | translate }}</span>
  </mat-list-item>
</mat-nav-list>

layout.component.ts

// ......
export class LayoutComponent implements OnInit {
  // ...
  menus: any[] = [
    {
      name: 'MENU_AS',
      icon: 'home',
      active: true
    },
    {
      name: 'MENU_VG',
      icon: 'create',
      active: false
    },
    {
      name: 'MENU_YP',
      icon: 'settings',
      active: false
    }
  ];

  onMenuClick(name: string): void {
    for (const item of this.menus) {
      if (item.name === name) {
        item.active = true;
      } else {
        item.active = false;
      }
    }
  }

}

在点击事件中传入 name 属性, 在 ts 里面遍历数组来找到相等的 name, 修改 active 属性
但是这样判断 name 是不合理的, 假设出现两个 name 值相等怎么办?
应该是判断当前对象而不是找 name, 找到当前对象在添加一个 .active, 并给所有同级别的菜单删除 .active, 原生 JS 可以实现, 但是在 angular 里木知道有没有什么好点的方法?
还有就是一定要给每个对象都繁琐地指定一个 active: false 属性吗? 有没有更好的方法?

Answer 1

其实没必要个个 item 都去设置一个 active 属性，可以试试下面这样

<... [ngClass]="{'active':item === selectedItem}" (click)="onMenuClick(item)" >

public selectedItem:any;
onMenuClick(item: any): void {
    if(this.selectedItem === item) {return;}
    this.selectedItem = item;
}