我试图在Angular2中创建一个图像滑块，如下所示 .
Slide Caption #1
Slide Caption #2
在我的滑块组件中，我希望能够获得每张幻灯片的高度，因此我使用@ContentChildren获取滑块内的幻灯片列表，并且还将ElementRef导入到幻灯片组件以便访问nativeElement属性 .
在ngAfterViewInit()函数中，我能够成功地使用console.log(slide.el)，它向我展示了两个ElementRef对象 . 当我手动点击它一直到属性，我看到clientHeight是303 px(view console output) .
现在来了奇怪的部分...当我在console.log(slide.el.nativeElement.clientHeight)时，突然间，我看到一个不同且完全错误的数字(view console output) . 对于我的生活，我无法弄清楚为什么会出现这种情况以及如何获得正确的身高值 .
slider.component.ts
import { Component, OnInit, ContentChildren, QueryList, AfterViewInit} from '@angular/core';
import { SlideComponent } from './slide/slide.component';
@Component({
selector: 'nstr-slider',
templateUrl: './slider.component.html',
styleUrls: ['./slider.component.scss']
})
export class SliderComponent implements AfterViewInit{
@ContentChildren(SlideComponent) slidesList: QueryList;
slides: Array;
constructor() {}
ngAfterViewInit(){
this.slides = this.slidesList.toArray();
for( let slide of this.slides){
// This shows correct height
console.log(slide.el);
// This does not
console.log(slide.el.nativeElement.clientHeight)
}
}
}
slide.component.ts
import { Component, ElementRef } from '@angular/core';
@Component({
selector: 'nstr-slide',
templateUrl: './slide.component.html',
styleUrls: ['./slide.component.scss']
})
export class SlideComponent {
constructor( private el: ElementRef ) { }
}
