我试图在Angular2中创建一个图像滑块，如下所示 .
<nstr-slider>
<nstr-slide src="image-1.jpg">Slide Caption #1</slide>
<nstr-slide src="image-2.jpg">Slide Caption #2</slide>
</nstr-slider>
在我的滑块组件中，我希望能够获得每张幻灯片的高度，因此我使用@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<SlideComponent>;
slides: Array<any>;
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 ) { }
}
1 回答
如果要访问DOM元素属性，则不能使用查询的组件 .
使用
read参数告诉查询要返回的内容：另见angular 2 / typescript : get hold of an element in the template