angular - cdkDragHandle 在子组件中不起作用

Question

使用@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 相同的组件中定义？

Answer 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 和任何你想要的样式来设置拖动容器的样式。我在其中有一个项目(拖动 handle )，它也占据了容器的整个宽度和高度，其中包含一个图像(就像旁注)。