如何将Angular cdkDrag与含cdkDragHandle的ng-template关联？

可以实现，核心是将cdkDrag绑定到目标容器，同时在ng-template内定义带cdkDragHandle的元素，再通过模板渲染将手柄纳入cdkDrag容器的层级中，具体实现如下：

代码示例 #

<!-- 定义包含拖拽手柄的ng-template -->
<ng-template #dragItemTemplate>
  <!-- 拖拽手柄：只有此区域可触发拖拽 -->
  <div cdkDragHandle class="drag-handle">
    🖱️ 拖拽手柄
  </div>
  <!-- 容器内容：无法触发拖拽 -->
  <div class="item-content">
    这是拖拽容器的内容区域
  </div>
</ng-template>

<!-- 绑定cdkDrag的可拖拽容器，渲染模板内容 -->
<div cdkDrag class="drag-container">
  <ng-container *ngTemplateOutlet="dragItemTemplate"></ng-container>
</div>

配套样式（可选，优化视觉效果） #

.drag-container {
  width: 240px;
  padding: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  margin: 16px;
}

.drag-handle {
  cursor: move;
  padding: 8px;
  background-color: #f5f5f5;
  border-radius: 4px;
  margin-bottom: 8px;
}

.item-content {
  padding: 8px;
}

关键注意点 #

• cdkDrag必须直接应用在最外层的可拖拽容器上，不能绑定到ng-template本身
• cdkDragHandle需要是cdkDrag容器的后代元素，通过ngTemplateOutlet渲染模板后，手柄会自动处于容器层级内
• 当容器内存在cdkDragHandle时，CDK会默认禁用容器其他区域的拖拽触发，仅手柄可拖拽

内容的提问来源于stack exchange，提问作者michalgrzegorczyk-dev