web-dev-qa-db-ja.com

Angular 2：HTML要素の位置を取得

私はAngular 2で任意のHTML要素を移動するためのカスタムディレクティブを実装しようとしています。これまでのところ、HTMLの初期位置を取得する方法がありません。要素をクリックして移動を開始したい場合、これら2つのホストバインディングを使用して、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要素の現在の位置を取得する必要がある代替方法は何ですか。

html5angularangular2-hostbinding
5
tzwickl
<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 も参照してください

20
Günter Zöchbauer

TypeScriptでは、次のように位置を取得できます。

@ViewChild('ElementRefName') element: ElementRef;

const {x, y} = this.element.nativeElement.getBoundingClientRect();
8
William Perez Herrera

hTMLで：

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

typeScriptで：

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 }
}
5
mohammad ali