Angular 类不实现继承的抽象成员

Question

在开发我面临问题的程序时，将抽象类扩展为可共享的角度组件

这是我的代码：

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 仓库

设想：

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

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

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

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

Answer 1

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

 protected createColumns() {
      return this.columns;
  }

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

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