我試圖在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 ) { }

}

總結

以上是生活随笔為你收集整理的element引入的组件大小高度不对_Angular 2：尝试使用ElementRef访问组件高度时的奇怪行为...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。