У меня есть 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 до ngDoCheck
или ngAfterContentChecked
, я получаю правильную высоту элемента.
Как уже упоминалось в Angular Docs , ngDoCheck имеет стоимость, связанную с производительностью, иЯ хотел бы придерживаться ngAfterViewInit , поскольку он должен вызываться после инициализации представления:
В то время как ловушка ngDoCheck () может определять, когда имя героя изменилосьЭто ужасная цена.Этот хук вызывается с огромной частотой - после каждого цикла обнаружения изменений, независимо от того, где произошло изменение.В этом примере он вызывается более двадцати раз, прежде чем пользователь сможет что-либо сделать.