Question

我试图按如下方法在我的角度应用程序中获取组件的偏移数据。

this.el.nativeElement.offsetWidth

但是如果我不通过它，它将返回0，如下所示。

this.renderer.setStyle(this.el.nativeElement, 'position', 'fixed');

它正在按我的意愿工作。返回本机组件的真实价值。我不想更改position属性。

您是否建议我任何解决方案来获取当前的偏移数据，例如offsetWidth等。您可以使用here。

Answer 1

之所以会这样，是因为默认情况下该组件是一个嵌入式元素。您可以将其display样式属性更改为block或inline-block，以在代码中获得正确的大小：

:host {
  display: block; /* or display: inline-block; */
}

有关演示，请参见this stackblitz。

Answer 2

有时元素可能没有对DOM对象的引用。尝试进行更改检测以刷新参考。抱歉，我无法发表评论。

在构造函数中导入ChangeDetectorRef

constructor(private changeDetect: ChangeDetectorRef) {}

@ViewChild('splashScreen') el: ElementRef;

getOffSetWidth() {
    // run change detection
    this.changeDetect.detectChanges();
    // And then try getting the offset
    const offsetWidth = this.el.nativeElement.offsetWidth;
    return offsetWidth; 
}

Angular的nativeElement的offsetWidth为0

2 个答案: