为什么 ViewChild ElementRef 在 ngAfterViewInit 中有 0 宽度和高度？

Question

我正在尝试根据元素的宽度和高度进行一些计算，但由于某种原因，这些在AfterViewInit生命周期挂钩上无法立即使用（两者均为 0）。
虽然setTimeout似乎确实可以解决问题，但我不喜欢它。

这是什么原因造成的？有没有更优雅的解决方案？

@ViewChild('main') mainDiv: ElementRef;

ngAfterViewInit() {

  this.printMainHeight() // 0

  // with setTimeout width is correctly retrieved ...

  setTimeout(() => this.printMainHeight()) // 430

}

printMainHeight() {

  console.log(this.mainDiv.nativeElement.getBoundingClientRect().height)     

}

HTML

<div class"main" #main>
  <app-toolbar></app-toolbar>
  <app-list></app-list>
</div>

Answer 1

除非您的模板中有任何异步更改，<app-toolbar>否则 这应该有效<app-list>。

您可以在此处查看示例：

https://stackblitz.com/edit/angular-stack-afterviewinit-55563149?file=src%2Fapp%2Fapp.component.ts

如果您看到这个示例，则#mainDiv在渲染后会发生更改（本例中为 setTimeout，但它可以是任何异步的内容，例如订阅和 ajax 请求），同时加载#syncDiv所有内容都是同步的。