角度不断调用函数来更新样式

Question

所以我有这个HTML：

<div cdkDrag>
<div id="container">
<div>
<button id="add-left">+</button>
</div>
<div id="cell">
<span class="cell-title">
title
</span>
<span class="cell-desc">
<p>desc</p>
</span>
</div>
<div>
<button id="add-right" (click)="getPosition()">+</button>
</div>
</div>
</div>
<div cdkDrag id="div2" style="width: 100px; height: 100px; top:250px; left:600px; background:#4527a0; position:absolute;"></div>
<svg style="width: 100vw; height: 100vh;"><line id="line1" stroke="lime" style="stroke-width:3.5"/></svg>

而这个打字稿函数：

getPosition() {
const line = document.getElementById('line1');
const div1 = document.getElementById('add-right').getBoundingClientRect();
const div2 = document.getElementById('div2').getBoundingClientRect();
line.setAttribute('x1', (div1.left + div1.width / 2).toString());
line.setAttribute('y1', (div1.top + div1.height / 2).toString());
line.setAttribute('x2', (div2.left + div2.width / 2).toString());
line.setAttribute('y2', (div2.top + div2.height / 2).toString());
}

getPosition(( 函数更新 svg 线坐标以连接框和单元格。问题是，我希望能够移动单元格和框，以及随之移动的线条。每次移动盒子时，我将如何更新行？

Answer 1

查看 cdk 文档，每当拖动项目时都会触发一个cdkDragMoved。

<div cdkDrag (cdkDragMoved)="getPosition()">
<div id="container">
<div>
<button id="add-left">+</button>
</div>
<div id="cell">
<span class="cell-title">
title
</span>
<span class="cell-desc">
<p>desc</p>
</span>
</div>
<div>
<button id="add-right" (click)="getPosition()">+</button>
</div>
</div>
</div>

文档提到要谨慎使用它，但它似乎适合您的用例。

在用户拖动项目时发出。请谨慎使用，因为此事件将针对用户拖动的每个像素触发。