Angular 和 ag-grid : cannot register framework component using frameworkComponents

Question

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

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

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

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

Error: No component factory found for fkRenderer. Did you add it to @NgModule.entryComponents?

at noComponentFactoryError (core.js:3256)

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

我的设置和我尝试过的:

Angular 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: Cannot read property 'componentFromFramework' of null at 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) at RowComp.push../node_modules/ag-grid-community/dist/lib/rendering/rowComp.js.RowComp.createNewCell (rowComp.js:610) at rowComp.js:594 at Array.forEach () at RowComp.push../node_modules/ag-grid-community/dist/lib/rendering/rowComp.js.RowComp.insertCellsIntoContainer (rowComp.js:587) at 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) at 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'