cdkDragHandle 在子组件中不起作用
Posted
技术标签:
【中文标题】cdkDragHandle 在子组件中不起作用【英文标题】：cdkDragHandle doesn't work inside child component 【发布时间】：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 【参考方案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
【讨论】：
以上是关于cdkDragHandle 在子组件中不起作用的主要内容，如果未能解决你的问题，请参考以下文章