Как войти в Angular2 offSetTop элемента без использования jQuery

Я пытаюсь создать директиву, которая будет медленно исчезать на фотографии, когда элемент станет видимым. Для этого моя первая идея заключается в сравнении позиции элемента относительно вершины (также проверяющей высоту окна). Но я могу найти, как это сделать с помощью Angular2.

Это мой код:

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);
    }
}

Но у this._el нет никакого метода или свойства, содержащего эту информацию.

Ответы

Ответ 1

Renderer предоставляет выбор методов, но AFAIK offsetTop не является одним из них (все они просто задают значения, а не получают их).

Вместо этого вы можете использовать

this._el.nativeElement.offsetTop

Ответ 2

"offsetTop относится к этому месту в документе, а не к порту представления." -Показать ссылку ниже

Мне удалось получить ACTUAL offsetTop в верхней части документа, используя:

this.element.nativeElement.getBoundingClientRect().top

Смотрите: fooobar.com/questions/456137/...

Ответ 3

Я думаю, вы должны иметь доступ к нему следующим образом:

this._el.nativeElement.offsetTop

Ответ 4

Попробуйте сделать это следующим образом:

  • обязательно объявите элемент в конструкторе, как "private":

    constructor (private el: ElementRef) {...}

  • убедитесь, что вы получили offsetTop после того, как элементы (-и) уже существуют на странице:

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