Angular使用*ngIf与*ngFor实现侧边栏点击展开嵌套菜单

核心改动逻辑 #

• 给每个带嵌套子项的菜单加独立的展开状态控制字段，避免全局变量控制导致所有菜单同时展开
• 点击时先判断是否有嵌套子项，有则切换展开状态并阻止路由跳转事件，无则正常走路由逻辑
• 拆分同元素的*ngIf和*ngFor结构指令，避免Angular语法报错

代码修改 #

sidebar.ts #

// 若使用TypeScript可先定义菜单项类型，无类型要求可跳过
interface MenuItem {
  label: string;
  image: string;
  route: string;
  nestedItems?: {label: string}[];
  isExpanded?: boolean;
}

// 初始化菜单数据，默认所有嵌套菜单收起
this.items: MenuItem[] = [
  { label: 'A', image: 'dashboard', route: 'AAA' },
  { label: 'B', image: 'my-apps', route: 'BBB' },
  { label: 'C', image: 'app-store', route: 'CCC' },
  { label: 'D', image: 'data', route: 'DDD' },
  { label: 'E', image: 'commercial-tools', route: 'EEE' },
  { label: 'F', image: 'dev-tools', route: 'FFF' },
  { label: 'G', image: 'data-source-mng', route: '',
    isExpanded: false,
    nestedItems: [{label: 'GA'}, {label: 'GB'}, {label: 'GC'}]
  },
];

// 菜单点击切换方法
toggleMenu(item: MenuItem, event: MouseEvent): void {
  // 存在嵌套子项时阻止路由触发，切换展开状态
  if (item.nestedItems?.length) {
    event.stopPropagation();
    event.preventDefault();
    item.isExpanded = !item.isExpanded;
  }
}

sidebar.html #

<div *ngFor="let item of items">
  <span (click)="toggleMenu(item, $event)">{{item.label}}</span>
  <!-- 仅当前菜单展开时显示子项 -->
  <ng-container *ngIf="item.nestedItems && item.isExpanded">
    <div *ngFor="let nestedItem of item.nestedItems" class="nav-nestedItem-label">
      {{nestedItem.label}}
    </div>
  </ng-container>
</div>

拓展说明 #

如果需要实现同一时间仅展开一个菜单的效果，只需将单个item的isExpanded字段替换为全局变量activeMenuLabel，切换时判断当前点击项的label是否等于activeMenuLabel即可，逻辑如下：

// ts中新增全局变量
activeMenuLabel = '';

// 修改toggle方法
toggleMenu(item: MenuItem, event: MouseEvent): void {
  if (item.nestedItems?.length) {
    event.stopPropagation();
    event.preventDefault();
    this.activeMenuLabel = this.activeMenuLabel === item.label ? '' : item.label;
  }
}

<!-- html中修改判断条件 -->
<ng-container *ngIf="item.nestedItems && activeMenuLabel === item.label">

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