cdkDragHandle 在子组件中不起作用答案

【问题标题】：cdkDragHandle doesn't work inside child componentcdkDragHandle 在子组件中不起作用
【发布时间】：2019-07-13 09:04:21
【问题描述】：

使用@angular/cdk 7.2.1：如果定义一个父组件包含一个cdkDropList 和一个cdkDrag 组件的嵌套列表，那么在嵌套的子组件内定义一个cdkDragHandle 不起作用。如果相同的结构都在同一个组件中，cdkDragHandle 可以完美运行。

https://stackblitz.com/edit/angular-wfvmuj?embed=1&file=src/app/hello.component.html

有没有人找到解决方法让 cdkDragHandle 工作，即使没有在与 cdkDrag 相同的组件中定义？

【问题讨论】：

发现问题：github.com/angular/material2/issues/13784

标签： angular drag-and-drop angular-cdk

【解决方案1】：

这个解决方案对我有用：

父组件：

<div cdkDropList #list="cdkDropList"
  [cdkDropListData]="myArray"
  (cdkDropListDropped)="drop($event)">

  <app-item
    *ngFor="let item of myArray"
    cdkDrag>
    <div cdkDragHandle></div>
  </app-item>

</div>

子组件（app-item）：

<div class="drag-container">
  <ng-content></ng-content>
  <div class="drag-handle">drag here</div>
</div>

然后在父组件中设置 cdk-drag-handle 类的样式。 cdk-drag-handle 自带材质，我们不需要手动应用：

.cdk-drag-handle {
   width: 100%;
   height: 100%;
   position: absolute;
   z-index: 100;
   background-color: transparent;
   cursor: move;
 }

然后使用 position: relative 和任何你想要的样式设置拖拽容器的样式。我在它里面有一个项目（拖动手柄），它也占用了容器的整个宽度和高度，其中包含一个图像（只是作为旁注）。

【讨论】：

感谢 lajuma 提出的解决方案。这基本上是其他人在上面引用的问题链接 github.com/angular/material2/issues/13784 中所建议的。

【解决方案2】：

这对我有用：而不是使用 cdkDragHandle，只需停止鼠标按下事件传播，如下所示。那么就只能拖拽header了。

<div>
  <header></header>
  <body (mousedown)="$event.stopPropagation()"></body>
</div>

【讨论】：

【解决方案3】：

不确定何时添加，在孩子中设置 cdkDragRootElement 对我有用。

子组件中<div cdkDrag cdkDragRootElement="app-bot-prompt-selector">app-bot-prompt-selector是需要可拖动的父元素

https://material.angular.io/cdk/drag-drop/api#CdkDrag

【讨论】：