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

Question

作为 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

ag-grid 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 }，但遇到了相同的错误。

---

编辑：试过肖恩兰兹曼的建议：

相同的 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 ( userComponentFactory.js:283) at CellComp.push../node_modules/ag-grid-community/dist/lib/rendering/cellComp.js.CellComp.chooseCellRenderer (cellComp.js:632) at new 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/ animationFrameService.js.AnimationFrameService.executeFrame (animationFrameService.js:84) 在 ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)

Answer 1

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

• 按名字：

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'