我試圖在Angular2中創(chuàng)建一個(gè)圖像滑塊，如下所示 .

Slide Caption #1

Slide Caption #2

在我的滑塊組件中，我希望能夠獲得每張幻燈片的高度，因此我使用@ContentChildren獲取滑塊內(nèi)的幻燈片列表，并且還將ElementRef導(dǎo)入到幻燈片組件以便訪問(wèn)nativeElement屬性 .

在ngAfterViewInit()函數(shù)中，我能夠成功地使用console.log(slide.el)，它向我展示了兩個(gè)ElementRef對(duì)象 . 當(dāng)我手動(dòng)點(diǎn)擊它一直到屬性，我看到clientHeight是303 px(view console output) .

現(xiàn)在來(lái)了奇怪的部分...當(dāng)我在console.log(slide.el.nativeElement.clientHeight)時(shí)，突然間，我看到一個(gè)不同且完全錯(cuò)誤的數(shù)字(view console output) . 對(duì)于我的生活，我無(wú)法弄清楚為什么會(huì)出現(xiàn)這種情況以及如何獲得正確的身高值 .

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 ) { }

}

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。