Angular CdkDropList切换display属性后无法触发cdkDropListDropped事件

核心原因：当cdkDropList处于display:none状态时，Angular CDK拖拽系统不会初始化其拖拽区域信息，即使切换为block后，首次拖拽时系统仍未更新这些信息。

方法1：手动调用CdkDropList的refreshed()方法 #

在#secondList所在组件中，获取CdkDropList实例，在容器显示后调用refreshed()方法更新拖拽区域：

import { CdkDropList } from '@angular/cdk/drag-drop';
import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'glx-drop-zone',
  templateUrl: './drop-zone.component.html'
})
export class DropZoneComponent {
  @ViewChild('secondList') dropList!: CdkDropList;
  files: any[] = [];

  // 监听显示状态变化，替换为你实际的状态订阅逻辑
  constructor(private explorer: ExplorerService) {
    this.explorer.showDropZone$.subscribe(isVisible => {
      if (isVisible) {
        // 延迟执行确保DOM已完成渲染
        setTimeout(() => {
          this.dropList.refreshed();
        }, 0);
      }
    });
  }

  drop(event: any) {
    // 你的drop事件处理逻辑
  }
}

方法2：用visibility:hidden替代display:none #

若业务允许，将容器的显示切换逻辑从display:none改为visibility:hidden配合高度控制，确保DOM元素始终存在，拖拽系统可正常初始化：

<div
  [style.visibility]="(explorer.showDropZone$ | async) ? 'visible' : 'hidden'"
  [style.height]="(explorer.showDropZone$ | async) ? 'auto' : '0'"
  [style.overflow]="(explorer.showDropZone$ | async) ? 'visible' : 'hidden'"
  class="drop-zone-container">
  <glx-drop-zone></glx-drop-zone>
</div>

额外注意事项 #

• 由于两个列表分属不同路由组件，需确保cdkDropListConnectedTo使用的ID全局唯一
• 调用refreshed()时需保证DOM已完成渲染，可通过setTimeout或AfterViewChecked生命周期钩子配合状态判断实现

内容的提问来源于stack exchange，提问作者Conor O'Malley