cdkDrag在角14的变换缩放奇怪的行为

Question

我正在编写一个angular 14应用程序，它包含一个div元素，可以使用cdkDrag拖动，并且还有两个按钮可以缩放div。

所以在组件中，我保存一个scale版本默认为一个，缩放按钮添加或dec 0.1从缩放变量，我定义了使用ngStyle与[ngStyle]="{ transform: 'scale(' + scale + ')' }"div的样式，并添加了一个cdkDrag，以支持在屏幕上拖动这个div。

因为拖放使用变换和缩放每当我尝试放大或缩小几次然后移动它，然后再缩放几次，然后移动它。它有一个奇怪的行为，当移动它的时候，它会回到原来的位置，回到原来的大小。

我看到了一些几年前的旧bug报告，但是我找不到任何对我的情况有帮助的东西。

所以我的模板文件是这样的:

<div cdkDrag [ngStyle]="{ transform: 'scale(' + scale + ')' }">
<button mat-icon-button (click)="zoomIn()" color="primary">
<mat-icon>zoom_in</mat-icon>
</button>
<button mat-icon-button (click)="zoomOut()" color="primary">
<mat-icon>zoom_out</mat-icon>
</button>
<p>Start editing to see some magic happen :)</p>
</div>

和我也复制在Stackblitz链接

如能提供有关此问题的任何信息，我将不胜感激。

Answer 1

我在项目中解决这个问题的方法是，我将缩放元素放入拖动元素中。

<div cdkDrag >
<div[ngStyle]="{ transform: 'scale(' + scale + ')' }">

Stackblitz例子