contenteditable 不适用于 cdkDrag

Question

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

#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 not working properly with cdkDrag on google-chrome解释相同，但无法得到任何答案。

Answer 1

CDK的DragRef听mousedown事件，因此您可以添加 (mousedown)="$event.stopPropagation()"您的处理程序 contenteditable div 以防止该事件冒泡到具有 cdkDrag 的元素关于它的指令。
编辑:这是 CDK 中的调用站点 DragRef代码:https://github.com/angular/components/blob/master/src/cdk/drag-drop/drag-ref.ts#L775