Angular ag-grid单元格渲染器父子通信onCancelClick不存在报错求助

架构老林

2026-10-1

问题排查与解决方案

错误原因

gridApi.getCellRendererInstances()会返回当前表格所有列的渲染器实例，除了你自定义的操作列rowEditCRenderer之外，其他列使用的是ag-grid自带的默认渲染器，这类默认渲染器不存在_agAwareComponent属性，更没有自定义的onCancelClick方法，遍历所有渲染器时访问不存在的方法就会抛出对应错误。
你参考的plunkr demo未触发报错，大概率是使用了ag-grid低版本，低版本默认渲染器的内部属性结构和你当前本地使用的版本不同，才没有暴露该问题。

修复步骤

第一步：修改渲染器遍历逻辑

不要直接访问ag-grid下划线开头的私有内部属性_agAwareComponent，这类属性会随版本迭代变更，优先使用官方公开APIgetComponent()获取自定义渲染器实例，同时遍历前先过滤非自定义渲染器：
修改app.component.ts中cancelOtherRowEditors方法代码如下：

cancelOtherRowEditors(currentRowIndex) {
  const renderers = this.gridApi.getCellRendererInstances();
  renderers.forEach(renderer => {
    // 先校验是自定义渲染器且存在onCancelClick方法再执行逻辑
    const componentInstance = renderer.getComponent?.();
    if (
      componentInstance &&
      typeof componentInstance.onCancelClick === 'function' &&
      !componentInstance.isNew &&
      currentRowIndex !== renderer.params.node.rowIndex
    ) {
      componentInstance.onCancelClick();
    }
  });
}

第二步：补全自定义组件属性声明

rowEditComponent中onEditClick方法使用了previousData但未在类中声明，补加属性声明避免隐式类型报错：

export class rowEditComponent implements ICellRendererAngularComp {
  public params: any;
  public isNew: any;
  public previousData: any; // 补加未声明的属性
  // 其余原有代码保持不变
}