3

我正在尝试在 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（查看控制台输出）。

现在出现了奇怪的部分......当我使用 console.log(slide.el.nativeElement.clientHeight) 时，突然之间，我看到了一个不同的且完全不正确的数字（查看控制台输出）。对于我的一生，我无法弄清楚为什么会出现这种情况以及如何访问正确的高度值。

滑块组件.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)

        }
    }

}

幻灯片组件.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 ) { }

}
4

1 回答 1

2

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

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

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

另请参阅angular 2 / typescript ：获取模板中的元素

于 2017-02-02T06:52:32.267 回答