1

我有一个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)
    }

}

记录这段代码，我总是得到值 0 作为 的高度elementContainer，但是如果我将ngAfterViewInit更改为ngDoCheckor ngAfterContentChecked，我会得到元素的正确高度。

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

虽然 ngDoCheck() 钩子可以检测英雄的名字何时改变，但它的代价是可怕的。这个钩子的调用频率很高——在每个更改检测周期之后，无论更改发生在哪里。在这个例子中，它在用户可以做任何事情之前被调用了二十多次。

4

0 回答 0