在hostDirectives中使用CdkDrag后，cdkDragHandle无法生效的问题排查

问题本质 #

你通过hostDirectives给组件宿主元素绑定了CdkDrag，此时默认拖拽触发区域是组件的宿主元素（<app-draggable>）。而模板内的cdkDragHandle属于组件内部DOM，CdkDrag不会自动将其设为唯一拖拽触发源——因为cdkDragHandle的默认关联逻辑是和同一模板层级下的cdkDrag配合生效，跨宿主与内部模板的场景需要手动配置。

解决方案 #

方案一：将CdkDrag移到模板内部容器（推荐）

直接移除hostDirectives中的CdkDrag，在模板的外层容器上绑定cdkDrag指令，让它和cdkDragHandle处于同一模板上下文，自动完成关联：

@Component({
  selector: 'app-draggable',
  standalone: true,
  imports: [CdkDrag, CdkDragHandle],
  // 移除hostDirectives中的CdkDrag配置
  template: `
    <div class="box" cdkDrag>
      <div class="handle" cdkDragHandle>Drag me</div>
      <p>Content here</p>
    </div>
  `,
})
export class DraggableComponent {}

方案二：手动绑定拖拽手柄（保留hostDirectives场景）

如果必须通过hostDirectives使用CdkDrag，需要在组件类中获取手柄元素，手动赋值给CdkDrag的handle属性，限制仅手柄可触发拖拽：

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

@Component({
  selector: 'app-draggable',
  standalone: true,
  imports: [CdkDragHandle],
  hostDirectives: [CdkDrag],
  template: `
    <div class="box">
      <div #dragHandle class="handle" cdkDragHandle>Drag me</div>
      <p>Content here</p>
    </div>
  `,
})
export class DraggableComponent implements AfterViewInit {
  constructor(private drag: CdkDrag) {}
  @ViewChild('dragHandle') dragHandle!: ElementRef<HTMLElement>;

  ngAfterViewInit() {
    // 将手柄元素绑定给CdkDrag实例
    this.drag.handle = this.dragHandle.nativeElement;
  }
}

内容的提问来源于stack exchange，提问作者Michał B