角2：ElementRefを使用してコンポーネントの高さにアクセスしようとすると奇妙な動作が発生する

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（）関数では、2つのElementRefオブジェクトを表示するconsole.log（slide.el）を正常に作成できました。私は手動でそれをプロパティまでずっとクリックすると、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