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");期间在dom中搜索元素ngAfterViewChecked，直到找到为止。然后在您第一次找到该事件时发出该事件。

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

代替ngIf，您可以切换可见性，这会更快，因为在创建组件时会在dom中创建#dtReport，而不是在reportModel更改时创建它。

fyi p-datatable已弃用，已被p-table取代

Answer 2

我需要知道何时渲染和使用大图像：

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

在尝试加载上述内容之前，您将必须先找到要挂接的内容，等等。也许将其放入其自己的组件中。

如何检查是否已渲染p数据表？

2 个答案: