Почему ViewChild ElementRef имеет 0 ширины и высоты в ngAfterViewInit?

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 docs говорится о ngAfterViewChecked():

Отвечать после Angular, проверяет представления компонента и дочерние представления / представление , в котором находится директива.

Calledпосле 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загрузить все синхронно.