Как проверить, что p-datatable был представлен?

Question

Допустим, у меня есть родительский и дочерний компоненты.

<button (click)="downloadReport()">Download Report</button>

<app-child-component [reportMode]="reportMode" (onReportModeReady)="onReportModeReady">
</app-child-component>

В дочернем компоненте мне нужно скрыть / отобразить некоторый компонент PrimeNg

<p-datatable #dtNormal ngIf="!reportMode"></p-datatable> //normal data table

<p-datatable#dtReport ngIf="reportMode"></p-datatable> //strip out version for report.

Проблема, с которой я столкнулся, состоит в том, что отчет строится до того, как скрывается даже нормальный элемент.и таблица отчета отображается.

Я хотел бы построить отчет только после того, как таблица отчета станет видимой, чтобы дочерний компонент мог инициировать событие, сообщающее родителю, что все готово.

Откуда мне знать, что Отчет primeNG с датой готов?

Спасибо

Answer 1

Вы можете искать в домене элемент document.getElementById("dtReport"); во время каждого ngAfterViewChecked, пока он не будет найден. Затем отправьте событие в первый раз, когда вы его найдете.

https://angular.io/guide/lifecycle-hooks

Вместо использования ngIf вы можете переключать видимость, что будет намного быстрее, потому что #dtReport будет создаваться в DOM при создании компонента, вместо того, чтобы создавать его при изменении reportModel.

fyi p-datatable устарела, его заменили на p-таблицу

Answer 2

Мне нужно было знать, когда были обработаны и использованы большие изображения:

window.requestAnimationFrame(x => {
    // its loaded here.
});

Вам нужно будет найти что-то, что можно использовать для вызова вышеупомянутого, прежде чем пытаться загрузить его и т. Д. Возможно, поместите это в отдельный компонент.