각도 2 : HTML 요소의 위치를 ​​얻으십시오.

Question

임의의 HTML 요소를 주위로 이동시키기 위해 각도 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 요소의 현재 위치를 가져와야합니다.

Answer 1

<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