Question

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

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

很遗憾，我无法按照手册https://www.ag-grid.com/javascript-grid-components/#registering-framework-components

注册框架组件

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

错误：找不到fkRenderer的组件工厂。您是否将其添加到   @ NgModule.entryComponents？

在noComponentFactoryError（core.js：3256）

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

我的设置以及我尝试过的操作：

Angular v6.1.10

ag-grid v21.0.1

module.ts

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

component.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>

component.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：this.frameworkComponents = { fkRenderer: ForeignKeyRendererComponent }来指定frameworkComponents，但是出现了相同的错误。

编辑：西恩·兰德斯曼（Sean Landsman）的建议：

相同的frameworkComponents定义：

frameworkComponents = { fkRenderer: ForeignKeyRendererComponent };

但是具有这样的列定义：

...
cellRenderer: 'fkRenderer'
...

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

custom-error-handler.ts：14 TypeError：无法读取属性 'componentFromFramework'为null 在UserComponentFactory.push ../ node_modules / ag-grid-community / dist / lib / components / framework / userComponentFactory.js.UserComponentFactory.lookupComponentClassDef中（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）在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'

Answer 2

我遇到了同样的问题，就我而言，某人（团队成员）在columnDefs中使用了企业过滤器agSetColumnFilter，我刚刚将其更改为普通的agTextColumnFilter过滤器，错误消失了

columnDefs = [{ 
        headerName: 'Client',
        field: 'client',
        filter: "agTextColumnFilter",
        // agSetColumnFilter - Enterprise feature
    }];

Angular和Ag-Grid：无法使用frameworkComponents注册框架组件

2 个答案: