Angular 10中关闭p-dialog触发栈溢出错误的解决方法

从错误栈可以看出，问题出在关闭对话框时，Angular的WebAnimations动画引擎需要遍历对话框内的大量DOM元素（4000+表格行），导致递归调用超出了JS的栈大小限制。以下是几个可行的修复方案：

方案1：禁用对话框的关闭动画 #

直接关闭p-dialog的隐藏动画，避免动画引擎遍历大量DOM元素。修改p-dialog标签，添加hideTransitionOptions属性：

<p-dialog [(visible)]="displayDrillDown" 
          [modal]="true" 
          [style]="{ width: '90vw' }" 
          header="{{ drilldownTitle }}"
          [hideTransitionOptions]="'0ms'">
    <app-ct-table-imsid-data [data]="ctdata"></app-ct-table-imsid-data>
    <ng-template pTemplate="footer">
        <p-button (click)="displayDrillDown = false" label="Close" styleClass="p-button-text"></p-button>
    </ng-template>
</p-dialog>

如果需要更彻底，也可以同时禁用显示动画：[showTransitionOptions]="'0ms'"。这个方案最简单，不需要修改业务逻辑。

方案2：关闭前清空子组件数据 #

在关闭对话框前，先清空传递给子组件的数据集，让子组件销毁多余的表格行DOM，再关闭对话框。

首先修改TS文件，添加关闭方法：

closeDialog() {
    // 先清空数据，触发子组件DOM销毁
    this.ctdata = [];
    // 用setTimeout让DOM更新完成后再关闭对话框
    setTimeout(() => {
        this.displayDrillDown = false;
    }, 0);
}

然后修改模板中的按钮点击事件：

<p-button (click)="closeDialog()" label="Close" styleClass="p-button-text"></p-button>

这个方案通过减少关闭时需要处理的DOM数量来避免栈溢出，同时保留动画效果。

方案3：优化表格的虚拟滚动（长期优化） #

给子组件的PrimeNG Table添加虚拟滚动功能，让表格只渲染当前可见的行，而不是一次性渲染所有4000+行。这样无论打开还是关闭对话框，DOM元素数量都保持在很低的水平。

在子组件的p-table标签中添加：

<p-table [value]="data" 
         [virtualScroll]="true" 
         [virtualScrollItemSize]="30"> <!-- 每行的高度，根据实际样式调整 -->
    <!-- 表格列定义和内容 -->
</p-table>

这个方案从根源上解决了大量DOM元素导致的性能问题，同时提升了表格的加载和操作体验。

内容的提问来源于stack exchange，提问作者FlyFish