Question

我有一个更新css类的组件

＆＃13;

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

＆＃13;

    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，但结果似乎与预期的一样：

所以在我看来它似乎正在起作用......

虽然我非常确定在您的情况下没有运行更改检测，但您应该尝试手动调用它。

将其添加到构造函数

private changeDetectorRef: ChangeDetectorRef

所以你的构造函数看起来像这样

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

}

并按照以下方式调用更改检测：

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
}

现在您在控制台中看到的值应该没问题。

如何在添加css类之后获取offsetWidth和offsetHeight值以更改它们

1 个答案: