offsetWidthとoffsetHeight値が後に彼らに

Question

を変更するCSSクラスを追加取得する方法を、私は更新CSSクラス

.slider-horizontal { 
 
    width: 210px; 
 
    height: 20px; 
 
}

 
    import {Component, OnInit, Input, ViewChild, ElementRef, Renderer} from '@angular/core'; 
    export class SliderComponent implements OnInit { 
     @ViewChild('picker') picker: ElementRef; 

     constructor(private renderer: Renderer, private el: ElementRef) { 

     } 

     ngAfterViewInit() { 
     this.renderer.setElementClass(this.picker.nativeElement, 'slider-horizontal', true); 

     console.log(this.picker.nativeElement.offsetWidth);//old value 
     console.log(this.picker.nativeElement.offsetHeight);//old value 
     } 
    } 

どのようにしている新しい値を得るのですかコンポーネントを持っていますcssを適用した後に変更しましたか？

Answer 1

私はあなたがそれをここに見つけることができる作業例でplnkrを作った：plnkr、しかし結果は予想通りであるように見える：

679 
0 

210 
20 

だから私のplunkで、それが働いているように見える...

変更の検出があなたのケースで実行されていないことは確かですが、手動で呼び出すようにしてください。価値観に今、あなたを

ngAfterViewInit() { 
    this.renderer.setElementClass(this.picker.nativeElement, 'slider-horizontal', true); 

    this.changeDetectorRef.detectChanges(); 

    console.log(this.picker.nativeElement.offsetWidth);//old value 
    console.log(this.picker.nativeElement.offsetHeight);//old value 
} 

：

だからあなたのコンストラクタはこの

constructor(private renderer: Renderer, 
      private el: ElementRef, 
      private changeDetectorRef: ChangeDetectorRef) { 

} 

ようになり、あなたのコンストラクタ

private changeDetectorRef: ChangeDetectorRef 

にこれを追加し、このような変化検出を呼び出しますコンソールでうまくいくはずです。