Angular16+AgGrid30：自定义单元格编辑器DOM路径修改问题

直接移动DOM节点会导致AgGrid内部维护的DOM引用失效，关闭编辑器时它仍会尝试从原父节点移除已被移走的元素，从而触发报错。以下是API层面的合规解决方案：

方案1：全局配置popupParent（官方推荐） #

AgGrid提供popupParent配置项，可直接指定所有弹出层（包括单元格编辑器）的父容器，无需手动操作DOM：

import { Component } from '@angular/core';
import { GridOptions } from 'ag-grid-community';

@Component({
  selector: 'app-grid',
  templateUrl: './grid.component.html',
  styleUrls: ['./grid.component.scss']
})
export class GridComponent {
  gridOptions: GridOptions = {
    // 其他基础配置
    popupParent: document.querySelector('.cdk-overlay-container') || document.body,
    defaultColDef: {
      editable: true,
      editorPopup: true, // 必须开启弹出模式，才会应用popupParent配置
      // 其他列默认配置
    }
  };
}

若需针对特定列单独设置，可在列定义中覆盖全局配置：

columnDefs = [
  {
    headerName: '目标列',
    field: 'targetField',
    editable: true,
    editorPopup: true,
    popupParent: document.querySelector('.cdk-overlay-container') || document.body,
    cellEditor: 'customEditorComponent' // 关联自定义编辑器
  }
];

方案2：自定义编辑器中动态指定父容器 #

如果需要更灵活的动态控制，可在自定义编辑器组件中实现ICellEditorAngularComp的getPopupParent方法：

import { Component } from '@angular/core';
import { ICellEditorAngularComp } from 'ag-grid-angular';

@Component({
  selector: 'app-custom-editor',
  templateUrl: './custom-editor.component.html',
  styleUrls: ['./custom-editor.component.scss']
})
export class CustomEditorComponent implements ICellEditorAngularComp {
  // 实现编辑器必备的init、getValue等方法...

  getPopupParent(): HTMLElement {
    return document.querySelector('.cdk-overlay-container') as HTMLElement || document.body;
  }
}

该方法会在编辑器弹出时被AgGrid调用，返回的元素即为弹出层的父容器，完全符合API规范，不会出现DOM引用冲突问题。

注意事项 #

• 确保cdk-overlay-container在AgGrid初始化前已存在于DOM中；若为动态生成元素，需等待其加载完成后再配置popupParent。
• 若使用Angular的ViewChild获取容器元素，需在ngAfterViewInit钩子中设置gridOptions.popupParent，避免获取到null。

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