角度2：获取HTML元素的位置

html5 angular angular2-hostbinding

31687 观看

3回复

我正在尝试在Angular 2中实现自定义指令，以移动任意HTML元素。到目前为止，一切工作正常，除了我现在不单击该元素并想要开始移动时如何获取该HTML元素的初始位置。我通过这两个主机绑定将其绑定到HTML元素的top和left样式：

/** current Y position of the native element. */
@HostBinding('style.top.px') public positionTop: number;

/** current X position of the native element. */
@HostBinding('style.left.px') protected positionLeft: number;

问题在于两者都undefined处于起步阶段。我只能更新也会更新HTML元素的值，但我看不到它吗？那是那样吗？如果是的话，我还必须检索HTML元素的当前位置。

作者: tzwickl 的来源 发布者: 2019 年 10 月 9 日

回应 (3)

19像 

<div (click)="move()">xxx</div>

// get the host element
constructor(elRef:ElementRef) {}

move(ref: ElementRef) {
  console.log(this.elRef.nativeElement.offsetLeft);
}

另请参阅https://stackoverflow.com/a/39149560/217408

作者: Günter Zöchbauer 发布者: 03.03.2017 10:18

4像

在typeScript中，您可以获得以下位置：

@ViewChild('ElementRefName') element: ElementRef;

const {x, y} = this.element.nativeElement.getBoundingClientRect();
作者: William Perez Herrera 发布者: 04.12.2018 03:44

2像

在html中：

<div (click)="getPosition($event)">xxx</div>

在打字稿中：

getPosition(event){
    let offsetLeft = 0;
    let offsetTop = 0;

    let el = event.srcElement;

    while(el){
        offsetLeft += el.offsetLeft;
        offsetTop += el.offsetTop;
        el = el.parentElement;
    }
    return { offsetTop:offsetTop , offsetLeft:offsetLeft }
}
作者: mohammad ali 发布者: 21.09.2018 01:53
32x32