web-dev-qa-db-ja.com

jQueryを使用せずにAngular2で要素のoffSetTopを取得する方法

要素が見えるようになると写真をゆっくりとフェードインするディレクティブを作成しようとしています。そうするために、私の最初のアイデアは、上部に対するアイテムの位置を比較することです（また、ウィンドウの高さをチェックします）。しかし、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には、その情報を含むメソッドやプロパティはないようです。

angularangular2-template
16
Fabiot

「offsetTopは、ビューポートに関連するのではなく、ドキュメント内の場所に関連します。」 -以下のリンクを参照してください

次を使用して、ドキュメントの上部から実際のoffsetTopを取得できました。

this.element.nativeElement.getBoundingClientRect().top

参照： https://stackoverflow.com/a/40877754/174239

22
rbj325

Rendererはメソッドの選択を提供しますが、知る限りoffsetTopはそれらの1つではありません（これらはすべて値を設定するためのものであり、値を取得するためのものではありません）。

代わりに使用できます：

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

次のようにしてください：

  • 「private」として、要素をコンストラクターに宣言してください：

    constructor（private el：ElementRef）{...}

  • 要素がページに既に存在する後にoffsetTopを取得することを確認してください：

    ngAfterViewInit（）{console.log（ 'el.nativeElement：'、this.el.nativeElement.offsetTop）; }

1
decebal

次のようにアクセスできるはずです。

this._el.nativeElement.offsetTop
0
Nige

次のようにしてください：

import { Component, OnInit, HostListener, ViewChild } from '@angular/core';


    @ViewChild("pageMenu")
      menuStickyElement;

     @HostListener("window:scroll", [])
      sticklyMenu() {
        // Get top height 
        this. offsetTop = document.documentElement.scrollTop
        if (document.documentElement.scrollTop >= this.menuStickyElement.nativeElement.offsetTop) {
          this.stickyNavMenu = true;
        } else {
          this.stickyNavMenu = false;
        }
      }
0
Mukesh Kumar Bijarniya

代わりにテンプレートでrefrenceを使用してみてください。

<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>

引数として参照名を使用します。

@ViewChild('galleryContainer') galleryContainer: ElementRef;

このように宣言されたビューの子は、ビューが初期化された後にのみ使用可能であることを忘れないでください。これが最初に発生するのは、ngAfterViewInit（AfterViewInitインターフェースをインポートして実装する）です。

次に、テンプレートで次のようなメソッドを呼び出します。

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

そして、あなたのコントローラーでは、メソッドは次のようになります：

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

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