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

Question

在处理我遇到问题的程序时，将抽象 class 扩展为可共享 angular 组件

这是我的代码：

AgGridDatasource (aggrid.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 配置相关的代码放入单独的抽象 class 中 aggrid.model.ts

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

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

Answer 1

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

 protected createColumns() {
      return this.columns;
  }

然后您可以从 ngOnInit.

调用此方法

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

Answer 2

我已经分叉了你的回购协议，运行它，并且...:[=22=]

首先，我从 AgGridComponent 的构造函数中删除了导致：Type 'typeof AgGridComponent' is not assignable to type 'Type<any>'. Cannot assign a 'protected' constructor type to a 'public' constructor type. 的 protected 访问修饰符，基本上这意味着 TypeScript 无法实例化 [=11] =] 如果它的构造函数受保护只能由它自己和它的 children 使用，那么，运行它再次...
然后，我意识到您正在尝试将接口 GridOptions 作为 object 依赖项注入到 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.

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

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

Angular class does not implement inherited abstract member

dependency-injection

typescript

ag-grid

angular