使用@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 相同的组件中定义?
最佳答案
这个解决方案对我有用:
父组件:
<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 ),它也占据了容器的整个宽度和高度,其中包含一个图像(就像旁注)。
关于angular - cdkDragHandle 在子组件中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54773383/