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

Posted 2023-03-28

【中文标题】Angular & ag-grid：无法使用 frameworkComponents 注册框架组件

【英文标题】：Angular & ag-grid: cannot register framework component using frameworkComponents

【发布时间】：2019-11-09 03:38:12

【问题描述】：

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

---

我的设置和我的尝试：

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 指定 frameworkComponents：this.frameworkComponents = fkRenderer: ForeignKeyRendererComponent ，但得到了同样的错误。

---

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

相同的框架组件定义：

frameworkComponents =  fkRenderer: ForeignKeyRendererComponent ;

但是使用这样的列定义：

...
cellRenderer: 'fkRenderer'
...

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

custom-error-handler.ts:14 TypeError: 无法读取属性 'componentFromFramework' 为空 在 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)

【问题讨论】：

你在module.ts的顶部import ForeignKeyRendererComponent from '...';了吗？

@DavidP.Hochman 是的——否则不会构建 ;-)

我以前没有看到过这个错误 - 如果你有问题的 repo（即 plunker 或类似的），我很乐意看看

@SeanLandsman 感谢您的反馈！我将尝试构建一个重现此内容的玩具项目，因为现在这发生在我们的专有代码中。

@SeanLandsman 更新：根据您的建议，我做了一个玩具项目，它可以工作。所以我认为在我的大项目中一定还有其他一些因素会影响到这一点。但是，您的建议是解决此问题的正确建议——谢谢！

【参考方案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'

【讨论】：

感谢您的回答！抱歉延迟回复，不得不跳到工作中的另一个项目。我已经尝试过你的建议，现在我收到一个新错误：“无法读取 null 的属性 'componentFromFramework'”。我已经用完整的堆栈跟踪更新了我在底部的帖子。

【参考方案2】：

我遇到了同样的问题，在我的情况下，有人（队友）在 columnDefs 中使用了 Enterprise filter agSetColumnFilter，我刚刚将其更改为 common agTextColumnFilter filter，错误消失

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