为什么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

有必要使用ngAfterViewChecked生命周期挂钩，而不是ngAfterViewInit。正如Angular的文档所说ngAfterViewChecked()：在Angular检查组件的视图和子视图/指令所在的视图之后响应。在ngAfterViewInit（）及其之后的每个ngAfterContentChecked（）之后调用。