AgGrid：onGridReady 是否符合 Angular 钩子？

Question

我像这样将数据源传递到网格：

  @Input() id: number;

  public gridOptions: GridOptions = {
    ...
    onGridReady: (event) => this.onGridReady(event)
  };

  public onGridReady(params): void {
    const dataSource = {
      getRows: (rowsParams: IGetRowsParams) => {

        return this.dataService.getData(this.id)
          .subscribe(data => rowsParams.successCallback(data.rows, data.amount))}
    };

    params.api.setDatasource(dataSource);
  }

和模板：

<ag-grid-angular class="ag-theme-alpine" [gridOptions]="gridOptions"></ag-grid-angular>

问题是 - 在 onGridReady 事件中使用 @Input 变量安全吗？问题可能比这更广泛，onGridReady 什么时候根据 Angular 生命周期挂钩触发？

P.S。 AgGrid 版本 24 和 Angular 10

Answer 1

onGridReady 将出现在任何 ngOnInit 或 @Input() 之后。当然，假设您只在有一些输入后才加载网格。

onGridReady 将在 Grid 准备就绪后触发。一旦组件初始化并开始加载它，网格只会被初始化和渲染等等。因此，ngOnInit 总是发生在 onGridReady.

之前

当涉及到@Input()时，您总是可以随时输入不同的数据，因此@Input()可能会导致一些数据刷新或以后发生变化。

但是，大多数用法类似于：

<div *ngIf="data">
  <ag-grid-angular
    [gridOptions]="gridOptions"
    [data]="data">
  </ag-grid-angular>
</div>

即如果你有一些数据要显示，只显示网格。那，或者有一种机制可以适当地填充网格and/or处理数据不足等问题

只要您仅在输入数据可用时显示任何组件，就可以安全地在 onGridReady 事件中使用该输入数据。

<div *ngIf="gridData">
  <app-my-grid-component [id]="someId">
  </app-my-grid-component>
</div>

@Input() public id: number;
...
public onGridReady(params: any): void {
  console.log('id', this.id);
}

否则，您需要等待一切正常可用：

private isGridReady: boolean = false;
private gridParams: any;

private _id: number;
@Input() public set id(value: number) {
  this._id = value;
  if (this.isGridReady) this.populateData();
}

public onGridReady(params: any): void {
  this.gridParams = params;
  this.isGridReady = true;
  if (this._id && this._id > 0) this.populateData();
}

private populateData(): void {
  // However you choose to populate the grid...
  this.service.getDataOrSomething(this.id)
    .subscribe((x) => this.gridParams.setRowData(x));
}

这种方法允许在任何点设置网格数据；如果输入在网格实际准备好之前或之后都可用，则填充。

AgGrid：onGridReady 是否符合 Angular 钩子？

AgGrid: does onGridReady fall into line with Angular hooks?

ag-grid

angular