时间戳

首页 > 解决方案 > Angular & ag-grid：无法使用 frameworkComponents 注册框架组件

angular - Angular & ag-grid：无法使用 frameworkComponents 注册框架组件

问题描述

作为 Angular 应用程序的一部分，我正在开发一个基于 ag-grid 的表格，并且我想将某个单元格呈现为 html 链接。

当我动态构建 columnDefs 时，我想避免在列定义中对单元格渲染器组件（下面代码中的ForeignKeyRendererComponent ）进行硬编码。

不幸的是，我无法按照手册注册框架组件：https ://www.ag-grid.com/javascript-grid-components/#registering-framework-components

当我这样做时，我收到此错误：

错误：未找到 fkRenderer 的组件工厂。你把它添加到@NgModule.entryComponents 了吗？

在 noComponentFactoryError (core.js:3256)

唯一可行的方法是直接在列定义中引用单元格渲染器组件，如下所示cellRendererFramework: ForeignKeyRendererComponent：

我的设置和我尝试过的：

角 v6.1.10

农业网格 v21.0.1

模块.ts

@NgModule({
  imports: [
    AgGridModule.withComponents([ForeignKeyRendererComponent]),
    ...
  ],
  declarations: [
    ForeignKeyRendererComponent,
    ...
  ],
  entryComponents: [
    ForeignKeyRendererComponent
  ],
});

组件.html

<ag-grid-angular style="height: 500px;"
                 class="ag-theme-balham"
                 [context]="context"
                 (gridReady)="onGridReady($event)"
                 [gridOptions]="gridOptions"
                 [frameworkComponents]="frameworkComponents"
                 [rowData]="rowData"
                 [columnDefs]="columnDefs"
                 rowSelection="multiple"
                 pagination=true
                 paginationPageSize=10>
</ag-grid-angular>

组件.ts

  private gridOptions: GridOptions = {
    defaultColDef: {
      filter: true
    },
    animateRows: true,
    isExternalFilterPresent: this.isExternalFilterPresent.bind(this),
    doesExternalFilterPass: this.doesExternalFilterPass.bind(this),
    frameworkComponents: { fkRenderer: ForeignKeyRendererComponent }
  };
...
this.columnDefs.push({
  headerName: translation,
  field: columnNames[index],
  sortable: true,
  filter: customFilter,
  editable: true,
  cellRendererFramework: 'fkRenderer'
});

我还尝试独立于 gridOptions: 指定 frameworkComponents this.frameworkComponents = { fkRenderer: ForeignKeyRendererComponent }，但遇到了同样的错误。

编辑：尝试了 Sean Landsman 的建议：

相同的 frameworkComponents 定义：

frameworkComponents = { fkRenderer: ForeignKeyRendererComponent };

但是使用这样的列定义：

...
cellRenderer: 'fkRenderer'
...

在这种情况下，我收到一个新错误：

custom-error-handler.ts:14 TypeError：无法在 UserComponentFactory.push../node_modules/ag-grid-community/dist/lib/components/framework/userComponentFactory.js.UserComponentFactory.lookupComponentClassDef 处读取 null 的属性“componentFromFramework”（ userComponentFactory.js:283) 在 CellComp.push../node_modules/ag-grid-community/dist/lib/rendering/cellComp.js.CellComp.chooseCellRenderer (cellComp.js:632) 在新 CellComp (cellComp.js:80) ) 在 RowComp.push../node_modules/ag-grid-community/dist/lib/rendering/rowComp.js.RowComp.createNewCell (rowComp.js:610) 在 rowComp.js:594 在 Array.forEach () 在 RowComp .push../node_modules/ag-grid-community/dist/lib/rendering/rowComp.js.RowComp.insertCellsIntoContainer (rowComp.js:587) 在 RowComp.push../node_modules/ag-grid-community/dist/lib/rendering/rowComp.js.RowComp.refreshCellsInAnimationFrame (rowComp.js:503) at AnimationFrameService.push../node_modules/ag-grid-community/dist/lib/misc/在 ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) 的 animationFrameService.js.AnimationFrameService.executeFrame (animationFrameService.js:84)

标签： angularag-gridag-grid-angular

解决方案

注册组件有两种方法——通过名称或直接引用：

  • 按名字：
gridOptions or bind to ag-grid-angular directly:
frameworkComponents: {
    countryCellRenderer: CountryCellRenderer
}

columnDefs: [{
   field: 'country',
   cellRenderer: 'countryCellRenderer'
}]
  • 引用：
columnDefs: [{
   field: 'country',
   cellRendererFramework: CountryCellRenderer
}]

在您的情况下，我认为您将两者混合在一起-尝试更改：

cellRendererFramework: 'fkRenderer'

至 cellRenderer: 'fkRenderer'

推荐阅读