Question

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

}

Answer 1

如果要访问DOM元素属性，则无法使用查询的组件。

使用read参数告诉查询要返回的内容：

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

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

Angular 2：尝试使用ElementRef访问组件高度时的奇怪行为

1 个答案: