이오니아 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); 
} 

내가 공을받을를

나는 또한 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); 
}