web-dev-qa-db-fra.com

Comment entrer dans Angular2 le offSetTop d'un élément sans utiliser jQuery

J'essaie de créer une directive qui s'estompe lentement dans une photo lorsqu'un élément est rendu visible. Pour ce faire, ma première idée est de comparer la position d'un élément par rapport au sommet (en vérifiant également la hauteur de la fenêtre). Mais je peux trouver comment faire cela avec Angular2.

C'est mon code jusqu'à présent:

import {Directive, ElementRef, Renderer} from 'angular2/core';

@Directive({
    selector: '[fadeInPhoto]',
    Host: {
        '(window:scroll)': 'onScroll()'
    }
})
export class FadeInPhotoDirective{
    private scrollTop: number;
    private initialClass: string;
    constructor(private _el: ElementRef, private _renderer: Renderer){
        this.initialClass = 'thumbnail';
    }

    onScroll(){
        console.log('Photo top:', this._el);
    }
}

Mais this._el ne semble pas avoir de méthode ou de propriété contenant cette information.

angularangular2-template
15
Fabiot

"offsetTop est relatif à sa place dans le document, pas par rapport au port de la vue." -Voir le lien ci-dessous

J'ai pu obtenir l'ACTUAL offsetTop du haut du document en utilisant:

this.element.nativeElement.getBoundingClientRect().top

Voir: https://stackoverflow.com/a/40877754/1742393

21
rbj325

La Renderer fournit une sélection de méthodes mais AFAIK offsetTop n'en fait pas partie (elles ne servent que pour définir des valeurs, pas pour en obtenir).

Vous pouvez utiliser à la place:

this._el.nativeElement.offsetTop
11
Günter Zöchbauer

Je pense que vous devriez pouvoir y accéder comme ceci:

this._el.nativeElement.offsetTop
1
Nige

Essayez de le faire comme ceci:

  • assurez-vous de déclarer l'élément dans le constructeur, en tant que "privé":

    constructeur (privé el: ElementRef) {...}

  • assurez-vous que vous obtenez le offsetTop après que le ou les éléments existent déjà sur la page:

    ngAfterViewInit () { console.log ('el.nativeElement:', this.el.nativeElement.offsetTop); }

1
decebal

Essayez plutôt d’utiliser une référence dans votre modèle:

<div id='gallery-container' #galleryContainer class='gallery-image-container'>
    <div> <img src="../pic1"></div>
    <div> <img src="../pic2"></div>
    <div> <img src="../pic3"></div>

</div>

Et utilisez le nom de référence comme argument:

@ViewChild('galleryContainer') galleryContainer: ElementRef;

n'oubliez pas de mentionner que toute vue ainsi déclarée n'est disponible qu'une fois la vue initialisée. Cela se produit pour la première fois dans ngAfterViewInit (importez et implémentez l'interface AfterViewInit).

puis dans votre modèle, appelez simplement la méthode comme ceci:

<div class="arrow " (click)="topArrowEffect()"  ></div>

et dans votre contrôleur votre méthode devrait être comme ceci:

topArrowEffect(){
        this.galleryContainer.nativeElement.scrollTop =10;
}
0
Zahra Shokrian

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