Question

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

我想以编程方式进行配置，我想将所有与agGrid配置相关的代码放入 Helper.ts 中的单独函数中。

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

我在下面的代码中为此写了代码，但是看起来不起作用：

助手类代码：

onGridReady(gridOptions: GridOptions) {
    this.helperService.ConfigureAgGrid(gridOptions);
}

组件代码：

{{1}}

Answer 1

从ag-grid website 有时，在Angular组件准备好接收它之前，可能会触发gridReady网格事件，因此在Angular环境中，在使用API之前，它更安全地依赖AfterViewInit。

Answer 2

我将抽象类用于通用设置

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;
  }
}

DEFAULT_GRID_OPTIONS的外观

export const DEFAULT_GRID_OPTIONS: GridOptions =  {
  localeText: AgGridLocaleText,
  defaultColDef: AgGridDefaultColDef,
  rowData: null,
  suppressDragLeaveHidesColumns: true,
  suppressNoRowsOverlay: false,
  suppressLoadingOverlay: false,
  loadingOverlayComponent: 'customLoadingOverlayComponent',
  noRowsOverlayComponent: 'customNoRowsOverlayComponent'

}

最后是我的带有构造函数的无限网格类，其中可以覆盖默认网格选项

export abstract class AgGridInfinityDatasource<T> extends AgGridDatasource implements IDatasource {

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


   (other code)

Answer 3

您需要gridOptions来初始化网格，因此永远不会触发onGridReady事件。我建议您采用这种方法；

在您的组件的onInit上

ngOnInit() {
   this.gridOption = <GridOptions>this.helperService.ConfigureAgGrid(gridOptions);
}

agGrid以编程方式配置

3 个答案: