有没有办法在 Angular 8 中获取元素的位置？

Question

我有一个问题： 我想将元素的位置作为值。例如 x= 10 和 y = 30。之后我想下次使用它们来更新元素的位置。首先，元素 A 位于 x=5 和 y=5 的位置。然后我拖动位置并获得位置 x=10 和 y=30。然后我设置下一次的位置并更新位置。 请帮忙！

Answer 1

这里是an example on Stackblitz 使用getBoundingClientRect() 来获取你需要的所有数据，这里是代码：

.ts：

import {
  Component,
  ElementRef,
  ViewChild,
  AfterViewInit,
  AfterContentChecked,
AfterViewChecked
} from "@angular/core";

/**
 * @title Basic Drag&Drop
 */
@Component({
  selector: "cdk-drag-drop-overview-example",
  templateUrl: "cdk-drag-drop-overview-example.html",
  styleUrls: ["cdk-drag-drop-overview-example.css"]
})
export class CdkDragDropOverviewExample implements AfterViewChecked {
  @ViewChild("block") block: ElementRef;

  constructor() {}
  
  ngAfterViewChecked() {
    let datas = this.block.nativeElement.getBoundingClientRect();
    console.log("datas = ", datas);
  }

  onDrop(item: any) {
    console.log("item = ", item.target.getBoundingClientRect());
  }
}

.html：

<div class="example-box" cdkDrag #block (mouseup)="onDrop($event)">
  Drag me around
</div>

.css：

.example-box {
  width: 200px;
  height: 200px;
  border: solid 1px #ccc;
}

请注意，这是使用 Angular 的 cdkDrasg（我基于文档 stackblitz 中的示例），因此如果您使用其他东西来实现拖放功能，则需要稍作调整。

另外，您是否打算手动编辑位置（通过打字稿），考虑使用 Renderer2 而不是直接使用 ViewChild。