Angular 的 nativeElement 的 offsetWidth 为 0

Question

我试图在我的 angular 应用程序中获取组件的偏移数据，如下所示。this.el.nativeElement.offsetWidth但是0如果我不传递它的 css 属性，它就会返回，如下所示。this.renderer.setStyle(this.el.nativeElement, 'position', 'fixed');它按我的意愿工作。返回本机组件的实际值。但我不想更改该position属性。您是否建议我获取当前偏移数据（如 offsetWidth 等）的任何解决方案。您可以在这里工作。

Answer 1

发生这种情况是因为组件默认是内联元素。您可以将其display样式属性更改为block或inline-block以在代码中获得正确的大小：

:host {

  display: block; /* or display: inline-block; */

}

有关演示，请参阅此 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; 

}