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

我有一个更新css类的Component

.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后更改的新值？

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
}

现在你在控制台中看到的值应该没问题 .

回复于 2024-05-10T03:00:15+08:00

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

1 回答

相关问题