web-dev-qa-db-fra.com

Angular 2: Obtenir la position de l'élément HTML

J'essaie d'implémenter une directive personnalisée dans Angular 2 pour déplacer un élément HTML arbitraire. Jusqu'à présent, tout fonctionne, sauf que je ne sais pas comment obtenir la position initiale de l'élément HTML lorsque je clique dessus et que je souhaite commencer à déplacer. Je lie les styles top et left de mon élément HTML avec ces deux liaisons d’hôte:

/** 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;

Le problème est que les deux sont undefined au début. Je peux seulement mettre à jour les valeurs qui mettront également à jour l'élément HTML mais je ne peux pas le lire? Est-ce que c'est supposé être comme ça? Et si oui, quelle alternative ai-je pour récupérer la position actuelle de l'élément HTML?.

html5angularangular2-hostbinding
4
tom1991te
<div (click)="move()">xxx</div>

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

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

Voir aussi https://stackoverflow.com/a/39149560/217408

17
Günter Zöchbauer

en html:

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

en 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 }
}
1
mohammad ali

Dans TypeScript, vous pouvez obtenir la position comme suit:

@ViewChild('ElementRefName') element: ElementRef;

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