Angular组件继承AgGridDatasource抽象类报错：未实现继承的抽象成员

错误根因 #

• Angular组件构造函数访问修饰符错误：AgGridComponent的构造函数声明为protected，Angular依赖注入系统实例化组件时要求构造函数必须为public，无法实例化受保护构造函数的类。
• 构造函数参数注入问题：原代码构造函数要求传入GridOptions类型的参数，但未配置对应Provider或@Input装饰器，Angular DI无法找到对应实例传入，触发注入错误。
• 抽象方法实现类型不兼容：createColumns方法未显式声明返回值类型为AbstractColDef[]，严格TypeScript配置下会判定未正确实现抽象类的抽象方法，同时@Input传入的columns未设置默认值，存在返回undefined的可能，不符合抽象方法返回值要求。
• this指向错误：dataSource中的getRows方法使用普通函数声明，运行时this指向IDatasource对象本身，不是AgGridComponent实例，无法获取到@Input传入的datasource数组。
• 行模型模块不匹配：配置了rowModelType为infinite，但引入的模块是ServerSideRowModelModule，模块不匹配导致行模型无法正常加载。
• 方法调用时机错误：ngOnInit阶段Grid尚未初始化，_gridApi为undefined，此时调用refreshColumns不会生效，需要等待onGridReady触发后再操作Grid实例。

修正后代码 #

AgGridComponent 修正代码 #

@Component({
  selector: 'ag-grid',
  templateUrl: './ag-grid.component.html',
  styleUrls: ['./ag-grid.component.css']
})
export class AgGridComponent extends AgGridDatasource implements OnInit {
  @Input() columns: AbstractColDef[] = [];
  @Input() datasource: any[] = [];
  // 若需要外部传入自定义配置可新增该Input
  @Input() customGridOptions: GridOptions = {};
  modules: Module[] = [InfiniteRowModelModule];
  rowCount?: number;

  // 构造函数改为public，无注入参数
  constructor() {
    super(Object.assign({
      rowModelType: 'infinite',
      pagination: false,
      rowSelection: 'none',
      suppressCellSelection: true,
      cacheBlockSize: 100,
    }, this.customGridOptions));
  }

  // 显式声明返回值类型，匹配抽象方法要求
  createColumns(): AbstractColDef[] {
    console.log(`Getting input columns here`)
    console.log(this.columns)
    return this.columns;
  }

  // 重写onGridReady，Grid初始化完成后再操作实例
  override onGridReady(event): void {
    super.onGridReady(event);
    this.refreshColumns();
    this.gridOptions.datasource = this.dataSource;
  }

  ngOnInit() {
    this.createColumns();
  }

  // 用箭头函数绑定this到组件实例
  dataSource: IDatasource = { 
    getRows: (params: IGetRowsParams) => {
      setTimeout(() => {
        console.log(`Getting updated input rows here`)
        console.log(this.datasource)
        params.successCallback(this.datasource, -1);
      }, 200);
    }
  }
}

额外注意事项 #

• 父类AgGridDatasource中的_gridApi、_gridColumnApi为private修饰符，若后续子类需要直接访问，建议改为protected修饰符，当前逻辑下不影响运行。
• 若使用ag-grid企业版，需确认对应模块的导入路径和名称正确。

内容的提问来源于stack exchange，提问作者Ahmer Ali Ahsan