contenteditable 不适用于 cdkDrag

Question

我正在尝试使用 div 元素标签并使其表现为带有 css 的文本区域。

#textarea {
    -moz-appearance: textfield-multiline;   ------------ card.component.css
    -webkit-appearance: textarea;
    border: 1px solid gray;
    font: medium -moz-fixed;
    font: -webkit-small-control;
    height: 28px;
    overflow: auto;
    padding: 2px;
    resize: both;
    width: 400px;
}

<div id="textarea" contenteditable>I look like a textarea</div>  ---- card.component.html

但我在我的卡上从父组件（类别组件）使用 cdkDrag

<div cdkDrag class="col-sm-12 px-2 pb-2">
  <app-card (cardEvent)="deleteCard($event)" [card]="card">

我发现此链接contenteditable 无法与 google-chrome 上的 cdkDrag 正常工作，解释相同，但无法得到任何答案。

Answer 1

CDK 会DragRef侦听该mousedown事件，因此您可以(mousedown)="$event.stopPropagation()"向contenteditablediv 添加一个处理程序，以防止该事件冒泡到具有该cdkDrag指令的元素。

编辑：这是CDK代码中的调用站点DragRef：https://github.com/angular/components/blob/master/src/cdk/drag-drop/drag-ref.ts#L775

Answer 2

该问题是由指令吸收鼠标左键单击事件CdkDrag引起的。如果您使用选项卡导航到该元素或右键单击它，则可以进行编辑以确认这一点。

一个可能的解决方案是将指令cdkDragDisabled的属性设置CdkDrag为 true，例如

<div cdkDrag [cdkDragDisabled]="some condition" ...

对于编辑的时间。

[cdkDragDisabled]只要给和添加相同的值[contentEditable]就可以了。