Angular CDK多层嵌套cdkDropList无法正常工作问题求助

核心问题分析 #

你的嵌套cdkDropList无法正常工作，主要源于以下几个问题：

• 重复使用相同的模板引用变量#doneList，导致Angular无法正确识别嵌套的拖拽容器
• 嵌套拖拽容器的cdkDropListData绑定错误，未指向当前列的元素集合
• 拖拽事件处理逻辑未适配嵌套结构，无法正确将元素添加到目标列中

修复步骤 #

1. 解决模板引用变量冲突 #

外层和嵌套的拖拽容器不能使用相同的模板变量名，给嵌套容器单独命名，同时修正数据绑定指向当前列的元素集合：

<ng-template #elseBlock>
  <div
    class="{{ column.size }}"
    cdkDropList
    #columnDropList="cdkDropList"
    [cdkDropListData]="column.elements"
    [cdkDropListConnectedTo]="[todoList]"
    (cdkDropListDropped)="dropToColumn($event, column)"
    [cdkDropListEnterPredicate]="() => true"
  >
    <div class="column-box" *ngFor="let element of column.elements" cdkDrag>
      <!-- input components -->
    </div>
  </div>
</ng-template>

2. 新增列内拖拽的事件处理方法 #

在组件类中添加专门处理嵌套列拖拽的方法，适配列内排序和侧边栏元素拖拽到列中的场景：

dropToColumn(event: CdkDragDrop<any[]>, column: any): void {
  if (event.previousContainer === event.container) {
    // 列内元素排序
    moveItemInArray(column.elements, event.previousIndex, event.currentIndex);
  } else {
    // 从侧边栏拖拽元素到列中
    const droppedItem = event.previousContainer.data[event.previousIndex];
    // 避免重复添加
    if (!column.elements.some(el => el.id === droppedItem.id)) {
      column.elements.push(droppedItem);
      // 如需从侧边栏移除元素，可在此调用removeItemFromArray方法
    }
  }
}

3. 修正外层拖拽容器的逻辑 #

外层拖拽容器负责添加整行，保持原有逻辑但明确操作目标为myFormArry.rows：

drop(event: CdkDragDrop<any[]>, isColumn: boolean): void {
  if (event.previousContainer === event.container) {
    // 整行排序
    moveItemInArray(this.myFormArry.rows, event.previousIndex, event.currentIndex);
  } else {
    const droppedItem = event.previousContainer.data[event.previousIndex];
    if (droppedItem.type === "column") {
      // 添加分行列
      this.myFormArry.rows.push({
        columns: [
          { uid: uuidv4(), size: "col-md-6", isColumn: true, elements: [] },
          { uid: uuidv4(), size: "col-md-6", isColumn: true, elements: [] }
        ]
      });
    } else {
      // 添加整行元素
      this.myFormArry.rows.push({
        columns: [
          { uid: uuidv4(), size: "col-md-12", isColumn: false, elements: [droppedItem] }
        ]
      });
    }
  }
}

4. 正确注册所有拖拽容器 #

使用@ViewChildren获取所有拖拽容器实例，统一注册到DragDropService：

@ViewChildren(CdkDropList) dropLists!: QueryList<CdkDropList>;

ngAfterViewInit(): void {
  this.dropLists.forEach(list => {
    this.dragDropService.register(list);
  });
}

额外注意事项 #

• 给所有cdkDrag元素绑定[cdkDragData]，方便拖拽时快速识别数据
• 统一拖拽预览样式，避免重复编写*cdkDragPreview
• 测试时覆盖三种场景：侧边栏到整行、侧边栏到嵌套列、列内元素排序

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