Angular 类没有实现继承的抽象成员

Posted 2023-03-28

【中文标题】Angular 类没有实现继承的抽象成员

【英文标题】：Angular class does not implement inherited abstract member

【发布时间】：2021-11-18 11:26:15

【问题描述】：

在处理我遇到问题的程序时，将抽象类扩展到可共享的角度组件

这是我的代码：

AgGridDatasource (agrid.model.ts)

export abstract class AgGridDatasource 

private _gridOptions: GridOptions = DEFAULT_GRID_OPTIONS;
private _gridApi: GridApi;
private _gridColumnApi: ColumnApi;

protected constructor(gridOptions: GridOptions) 
    this._gridOptions = Object.assign(, this._gridOptions, gridOptions);


refreshColumns(): void 
    if (this._gridApi) 
        this._gridApi.setColumnDefs(this.createColumns());
    


abstract createColumns(): AbstractColDef[];

onGridReady(event): void 
    this._gridApi = event.api;
    this._gridColumnApi = event.columnApi;


get gridOptions(): GridOptions 
    return this._gridOptions;


get gridApi(): GridApi 
    return this._gridApi;


get gridColumnApi(): ColumnApi 
    return this._gridColumnApi;

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[];
  modules: Module[] = [ServerSideRowModelModule];
  rowCount?: number;

  protected constructor(gridOptions: GridOptions) 
    super(Object.assign(,
      rowModelType: 'infinite',
      pagination: false,
      rowSelection: 'none',
      suppressCellSelection: true,
      cacheBlockSize: 100,
     ,gridOptions));
  

  createColumns() 
    console.log(`Getting input columns here`)
    console.log(this.columns)
    return this.columns;
  



  ngOnInit() 
    this.gridOptions.datasource = this.dataSource;
    this.createColumns();
    this.refreshColumns();
  

  dataSource: IDatasource =  
    getRows(params: IGetRowsParams): void 
      setTimeout(() => 
        console.log(`Getting updated input rows here`)
        console.log(this.datasource)
        params.successCallback(this.datasource, -1);
      , 200);
    
  

面对错误（更新）：

GITHUB REPO

场景：

我刚刚开始在我的应用程序中实现 ag-grid。

我想以编程方式配置它，我想把所有agGrid配置相关的代码放到aggrid.model.ts中一个单独的抽象类中

我想在我的所有应用程序中使用这个AgGridComponent 来配置 agGrid，以便我可以从一个地方管理 agGrid。

我正在为此编写上面的代码，但看起来它不起作用

【问题讨论】：

您的抽象类中有abstract createColumns(): AbstractColDef[];。你需要实现它。

感谢您对我的问题的帮助。是的，我现在已经实现了该方法，但是现在错误已更改，并且我还使用 Github 存储库链接的更新屏幕截图更新了我的问题。请查看并更新您的答案。谢谢

【参考方案1】：

您需要在您的组件中提供createColumns 方法的实现。从ngOnInit中取出createColumns方法，使其成为组件实例方法：

 protected createColumns() 
      return this.columns;
  

然后你就可以从ngOnInit调用这个方法了。

您应该考虑更改的另一点是从AgGridComponent 的构造函数中删除protected 修饰符。由于构造函数受到保护，Angular 将无法创建该组件的实例。将此更改为 public 构造函数。

【讨论】：

感谢您对我的问题的帮助。是的，我现在已经实现了该方法，但是现在错误已更改，并且我还使用 Github 存储库链接的更新屏幕截图更新了我的问题。请查看并更新您的答案。谢谢

请检查我的更新答案。

是的，我已经通过从我的构造函数中删除受保护的修饰符来检查它，但是它仍然给了我很多错误并且没有构建我的代码。你能检查我的回购，我到底做错了什么？

我的场景还没有完全填满，但是当你在我的代码中选择我做错了什么时，我接受了你的答案。

@AhmerAliAhsan 我想，你想要实现的已经在这里实现了，看看：npmjs.com/package/ag-grid-angular

【参考方案2】：

我已经分叉了你的 repo，运行它，然后...：

首先，我从 AgGridComponent 的构造函数中删除了 protected 访问修饰符，它导致：Type 'typeof AgGridComponent' is not assignable to type 'Type<any>'. Cannot assign a 'protected' constructor type to a 'public' constructor type.，基本上这意味着 TypeScript 无法实例化 AgGridComponent，如果它的构造函数受到保护，只能由它自己和它的孩子，所以，再次运行它...... 然后，我意识到您正在尝试将接口GridOptions 作为对象依赖项注入AgGridComponent，我认为存在问题...

因为 Angular 注入器将尝试使用 new 关键字实例化组件构造函数中的所有参数，因此，因为 GridOptions 是一个接口并且无法实例化，那么 Angular投诉：

No suitable injection token for parameter 'gridOptions' of class 'AgGridComponent'. Consider using the @Inject decorator to specify an injection token.

所以，也许你应该创建另一个可能用@Injectable() 装饰的类，它实现GridOptions 接口，然后你最好将它注入到AgGridComponent 的构造函数中。