添加css类更改它们后如何获取offsetWidth和offsetHeight值答案

【问题标题】：How to get offsetWidth and offsetHeight values after add css class to change them添加css类更改它们后如何获取offsetWidth和offsetHeight值
【发布时间】：2017-06-01 00:04:42
【问题描述】：

我有一个更新 css 类的组件

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

从“@angular/core”导入 {Component, OnInit, Input, ViewChild, ElementRef, Renderer}；导出类 SliderComponent 实现 OnInit { @ViewChild('picker') 选择器：ElementRef; 构造函数（私有渲染器：渲染器，私有 el：ElementRef）{ } ngAfterViewInit() { this.renderer.setElementClass(this.picker.nativeElement, 'slider-horizontal', true); console.log(this.picker.nativeElement.offsetWidth);//旧值 console.log(this.picker.nativeElement.offsetHeight);//旧值 } }

如何获取应用 css 后更改的新值？

【问题讨论】：

请提供一个 plunker 来证明您的问题。

标签： css angular

【解决方案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
}

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

【讨论】：

我认为detectChanges 在这里是多余的。如果@loi mai 提供一个真实的例子会很棒
@yurzui 我记得之前遇到过这个问题并手动调用更改检测解决了它（虽然是 RC 构建）但确实一个代码示例非常有用
感谢您的 plnkr。这正是我的代码的样子。但我使用 angular-cli。有时它可以正常工作，但有时不能。当我进行调试时，它的宽度也动态地跟随网络浏览器窗口的宽度，我的意思是我在调试时改变了浏览器窗口的大小。我添加了this.changeDetectorRef.detectChanges();，但没有什么不同。