如何阻止Angular CDK为元素添加transform属性

Question

我使用Angular CDK作为拖拽&拖放的场景是:当拖放结束时，我计算元素的新坐标并更新它，这也会导致DOM更新

<div
cdkDrag
cdkDragBoundary=".page"
[ngStyle]="position"
(cdkDragEnded)="dragEnded($event)"
>
...
</div>

和打印稿:

get position(): NotePositionEntry {
return {
top: `${this.note.posY}px`,
left: `${this.note.posX}px`,
} as NotePositionEntry;
}
dragEnded(dragEvent: any): void {
this.note = {
...this.note,
posX: this.note.posX + dragEvent.distance.x,
posY: this.note.posY + dragEvent.distance.y,
};
}

方法dragEnded设置了posX和posY后，get position()返回新对象，该对象应该只设置css、top和left道具。

问题是，而不是top和left，我看到transform: translate3d(...)属性添加到元素，这导致问题(元素没有精确定位)。

任何想法，我怎么能阻止Angular CDK添加transform属性后拖动结束?

Answer 1

我有一个问题与CdkDrag的主机元素得到CSS样式添加到它:

transform: translate3d(x,y,z) 

只有当我将CdkDrag注入到我在放置CdkDrag属性的同一元素上使用的自定义指令的构造函数中时，才会发生这种情况。

一个有效的解决方案是设置style:

host:{ transform: none !important }

感觉像个黑客。应该有办法关闭这个