如何在Angular中实现支持层级子分类的树形多选下拉菜单

你当前使用的ng-multiselect-dropdown原生不支持层级树形结构，可通过以下两种方案实现需求：

方案1：基于现有组件改造（最小改动，无需更换依赖） #

该方案通过自定义选项模板、添加层级缩进模拟树形效果，可直接复用现有逻辑：

步骤1：调整TS代码 #

修改下拉列表数据结构，新增parent_id、level字段标记层级，补充父子联动逻辑：

export class UserComponent implements OnInit {
  // 扩展数据类型，新增层级相关字段
  dropdownList: { item_id: number; item_text: string; parent_id?: number; level?: number; isParent?: boolean }[] = [];
  selectedItems: { item_id: number; item_text: string; }[] = [];
  dropdownSettings : IDropdownSettings;

  constructor(public service: UserService) { }

  ngOnInit(): void {
    // 补充树形结构数据
    this.dropdownList = [
      { item_id: 1, item_text:'North Spine', level: 0, isParent: true },
      { item_id: 11, item_text:'N1', parent_id: 1, level: 1 },
      { item_id: 111, item_text:'N1.1', parent_id: 11, level: 2 },
      { item_id: 112, item_text:'N1.2', parent_id: 11, level: 2 },
      { item_id: 113, item_text:'N1.3', parent_id: 11, level: 2 },
      { item_id: 2, item_text: 'Academics', level: 0 },
      { item_id: 3, item_text: 'Staff Housing', level: 0 },
      { item_id: 4, item_text: 'Student Hall', level: 0 },
    ];
    this.selectedItems = [
      { item_id: 3, item_text: 'Staff Housing' },
      { item_id: 4, item_text: 'Academics' }
    ];
    
    this.dropdownSettings = {
      singleSelection: false,
      idField: 'item_id',
      textField: 'item_text',
      selectAllText: 'Select All',
      unSelectAllText: 'UnSelect All',
      itemsShowLimit: 4,
      allowSearchFilter: true
    };
  }

  // 勾选时添加父子联动逻辑
  onItemSelect(item: any) {
    // 如果勾选的是父级，自动勾选所有子项
    if(item.isParent) {
      const children = this.dropdownList.filter(i => i.parent_id === item.item_id);
      children.forEach(child => {
        if(!this.selectedItems.find(s => s.item_id === child.item_id)) {
          this.selectedItems.push(child);
        }
      })
    }
    console.log(item);
  }
  onSelectAll(items: any) {
    console.log(items);
  }
  // 移除选项时可按需添加父子联动取消逻辑
}

步骤2：调整HTML代码 #

添加自定义选项模板，通过层级控制缩进，模拟树形视觉效果：

<div class="col-sm-6 form-group">
  <label for="Building">Authorized Building</label>
  <ng-multiselect-dropdown 
    [placeholder]="'Select the Building'" 
    [settings]="dropdownSettings"
    [data]="dropdownList" 
    [(ngModel)]="selectedItems" 
    (onSelect)="onItemSelect($event)"
    (onSelectAll)="onSelectAll($event)">
    <!-- 自定义下拉选项模板，添加缩进 -->
    <ng-template #optionsTemplate let-item="item">
      <span style="padding-left: {{item.level * 16}}px">
        {{item.isParent ? '📂 ' : '📄 '}}{{item.item_text}}
      </span>
    </ng-template>
  </ng-multiselect-dropdown>
</div>

该方案缺点是仅为视觉层级，不支持父节点折叠展开，适合层级少、结构简单的场景。

方案2：替换为原生支持树形的下拉组件（推荐，功能更完善） #

如果需要支持折叠展开、父子级联动等完整树形功能，建议更换为ngx-tree-select或Angular Material 树选择组件，原生支持层级结构配置，直接传入嵌套的树形数据即可实现效果图的交互效果：

实现后可支持父节点折叠、勾选父级自动选中所有子级、所有选中项均展示在标签区域且支持单独移除，完全匹配需求。

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