element引入的组件大小高度不对_Angular 2：尝试使用ElementRef访问组件高度时的奇怪行为...

我试图在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 ) { }

}