Angular 2 : Weird Behavior When Trying to Access Component's Height using ElementRef

Question

我正在尝试在 Angular2 中创建一个图像 slider ，如下所示。

<nstr-slider>
    <nstr-slide src="image-1.jpg">Slide Caption #1</slide>
    <nstr-slide src="image-2.jpg">Slide Caption #2</slide>
</nstr-slider>

在我的 slider 组件中，我希望能够获得每张幻灯片的高度，所以我使用@ContentChildren 来获取 slider 内的幻灯片列表，并且还将 ElementRef 导入到幻灯片组件中以便访问到 nativeElement 属性。

在 ngAfterViewInit() 函数中，我能够成功地使用 console.log(slide.el)，它显示了两个 ElementRef 对象。当我手动点击它一直到属性时，我看到 clientHeight 是 303 像素 ( 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 ) { }

}

Answer 1

如果要访问 DOM 元素属性，则不能使用查询组件。

使用read 参数告诉查询返回什么:

@ContentChildren(SlideComponent, {read: ElementRef}) slidesList: QueryList<ElementRef>;

另见 angular 2 / typescript : get hold of an element in the template