Angular侧边栏点击Currency菜单时意外显示Item选项问题

问题描述 #

点击「Market」菜单时，「Item」页面正常隐藏，符合预期：

遇到的异常是点击「Currency」菜单时：

不属于Currency菜单下的「Item」选项会意外显示，Item并不在Currency页面的菜单结构中：

相关代码 #

admin.component.html

<ul class="nav-links">
   <li [ngClass]="{ selected: selectedTab === 'market' }">
      <a
         routerLink="market"
         (click)="selectElementMenu(); selectedTab = 'market'"
         >
      <i class="bx bx-grid-alt"></i>
      <span class="links_name">Market</span>
      <i class="bx bx-chevron-down" *ngIf="selectedTab != 'market'"></i>
      <i class="bx bx-chevron-up" *ngIf="selectedTab == 'market'"></i>
      </a>
   </li>
   <li *ngIf="hidden">
      <a routerLink="item">
      <span class="links_name" style="padding-left: 75px">Item</span>
      </a>
   </li>
   <li [ngClass]="{ selected: selectedTab === 'currency' }">
      <a
         routerLink="currency"
         (click)="selectElementMenu(); selectedTab = 'currency'"
         >
      <i class="bx bx-grid-alt"></i>
      <span class="links_name">Currency</span>
      <i class="bx bx-chevron-down" *ngIf="selectedTab != 'currency'"></i>
      <i class="bx bx-chevron-up" *ngIf="selectedTab == 'currency'"></i>
      </a>
   </li>
</ul>

admin.component.ts

showSideBar: boolean = false;

  elementMenu: boolean = false;
  selectedTab!: string;

  ngOnInit() {
  }

  toggleSideBar() {
    this.showSideBar = !this.showSideBar;
  }

  selectElementMenu() {
    this.elementMenu = !this.elementMenu;
  }

根因分析 #

• Market和Currency两个菜单的点击事件都绑定了selectElementMenu()方法，点击任意菜单都会切换elementMenu的布尔值
• Item是Market专属的子菜单，现有显示条件未关联当前激活的菜单类型，只要elementMenu为真，不管当前选中的是哪个菜单，Item都会显示
• 代码存在变量名错误：Item菜单的显示判断用了未定义的hidden变量，实际应该关联控制展开的elementMenu变量

修复方案 #

1. 移除Currency菜单点击事件中的selectElementMenu()调用，Currency无子菜单不需要触发展开逻辑
2. 修正Item菜单的显示条件，增加当前激活菜单判断，替换错误的hidden变量

修改后代码（admin.component.html） #

<ul class="nav-links">
   <li [ngClass]="{ selected: selectedTab === 'market' }">
      <a
         routerLink="market"
         (click)="selectElementMenu(); selectedTab = 'market'"
         >
      <i class="bx bx-grid-alt"></i>
      <span class="links_name">Market</span>
      <i class="bx bx-chevron-down" *ngIf="selectedTab != 'market'"></i>
      <i class="bx bx-chevron-up" *ngIf="selectedTab == 'market'"></i>
      </a>
   </li>
   <!-- 修正显示条件 -->
   <li *ngIf="selectedTab === 'market' && elementMenu">
      <a routerLink="item">
      <span class="links_name" style="padding-left: 75px">Item</span>
      </a>
   </li>
   <li [ngClass]="{ selected: selectedTab === 'currency' }">
      <a
         routerLink="currency"
         (click)="selectedTab = 'currency'"
         >
      <i class="bx bx-grid-alt"></i>
      <span class="links_name">Currency</span>
      <i class="bx bx-chevron-down" *ngIf="selectedTab != 'currency'"></i>
      <i class="bx bx-chevron-up" *ngIf="selectedTab == 'currency'"></i>
      </a>
   </li>
</ul>

内容的提问来源于stack exchange，提问作者aagharaf