无法在ngAfterViewInit中获得一致的元素高度

Question

我在ion-row中有一个ion-grid，并且在某些情况下ion-row中的元素是动态显示的。

我的目标是在计算完所有条件并渲染最终视图后检索离子行的高度：

<ion-grid>
  <ion-row #elementContainer>
    <!-- Elements here are displayed dynamically -->
  </ion-row>
</ion-grid> 

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

@Component({
  //...
})
export class ConversationCardPage implements AfterViewInit {

    //...
    @ViewChild("elementContainer", { read: ElementRef }) elementContainer: ElementRef;

    ngAfterViewInit() {
        console.log(this.elementContainer && this.elementContainer.nativeElement
           ? this.elementContainer.nativeElement.clientHeight
           : -1)
    }

}

记录此代码，我总是得到elementContainer的高度值0，但是如果我将 ngAfterViewInit 更改为ngDoCheck或ngAfterContentChecked，我得到了元素的适当高度。

如Angular Docs中所述，ngDoCheck在性能方面存在成本，并且我想坚持使用 ngAfterViewInit ，因为应该在视图初始化后立即调用它：

  

虽然ngDoCheck（）钩子可以检测英雄的名字何时具有   改变了，它付出了可怕的代价。这个钩子被称为巨大   频率-在每个变更检测周期之后，无论   发生了变化。在此示例中，它被调用了二十多次   用户可以做任何事情。