Ionic 2 - スティッキーヘッダー

Question

私のアプリには、現在のブロックの値を保持する固定ヘッダーを作成する必要があります。

私はこのコードを使用してスクロール位置取得：スティッキーヘッダーに表示するどの要素を決定するために

import { Component, ViewChild } from '@angular/core'; 
import { Content } from 'ionic-angular'; 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 
    @ViewChild(Content) 
    content:Content; 

    ngAfterViewInit() { 
    // I want to trigger the listener during the scroll event 
    this.content.ionScroll.subscribe((data)=>{ 
     this.onPageScroll(data); 
    }); 
    } 

    onPageScroll(data) { 
    console.log("top:", data['scrollTop']) 
    } 

    : 
    : 

を、Iは、それぞれの端部に有して隠し要素をブロック：

<div class="titleTag" style="display:none">{{event.title}}</div> 

私はこれらの要素の位置を取得しよう：

let titleTags = document.getElementsByClassName('titleTag'); 
for (let el of <any>titleTags) { 
    console.log(" > offsetTop", el.offsetTop); 
} 

私は0を取得します

私もoffsetHeightとscrollTopを試しましたが、どちらも0を返します。

Answer 1

イオン2 /角度2の要素を直接取得するには、ElementRefを使用します。

import {ElementRef} from '@angular/core'; 


//class.. 
constructor(public el:ElementRef){} 

//in your function... 
let titleTags =this.el.nativeElement.getElementsByClassName('titleTag'); 
for (let el of <any>titleTags) { 
    console.log(" > offsetTop", el.offsetTop); 
}