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)     
  
}

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

。

Answer 1

有必要使用ngAfterViewChecked生命周期挂钩，而不是ngAfterViewInit。就像Angular文档所说的ngAfterViewChecked()：

在Angular检查组件的视图和子视图后响应   指令所在的视图。

在ngAfterViewInit（）之后及其后的所有调用   ngAfterContentChecked（）。

Answer 2

除非您在<app-toolbar>或<app-list>中的模板中进行了异步更改，否则该方法应该有效。

您可以在此处查看示例：

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

如果您看到此示例，则#mainDiv会在呈现后进行更改（在此示例中为setTimeout，但可以是任何异步内容，例如订阅和ajax请求），同时#syncDiv会同步加载所有内容

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

2 个答案: