Angular 农业网格出错："Could not find component class XXX, did you forget to configure this component"

Question

当运行一个农业网格应用程序时，我从 Chrome 收到此错误。基本上，我有以下

export class CustomHeader implements IHeaderAngularComp {
  private params: any;


  @ViewChild('menuButton', { read: ElementRef }) public menuButton;

  agInit(params): void {
    this.params = params;
  }

  onMenuClicked() {
    this.params.showColumnMenu(this.menuButton.nativeElement);
  }

  refresh(params: IHeaderParams): boolean {
    return true;
  }
}

...

ColumnDefs = {
    ...
     {
        field: "A column", editable: false, sortable: false, width: 90,
        type: 'stringColumn', centered: true, pinned: 'left',
        headerComponent: CustomHeader,
        headerComponentParams: {
          template: `
            <div ref="eLabel" class="lmn-form-group">
              <input ref="eCheck" type="checkbox">
              <span>Use This</span>
            </div>
          `
        }
     },
    ...
}

Chrome 表示无法识别此 CustomHeader:

Could not find component class CustomHeader { agInit(params) { this.params = params; } onMenuClicked() { this.params.showColumnMenu(this.menuButton.nativeElement); } refresh(params) { return true; } }, did you forget to configure this component?"

有什么我遗漏的吗？

Answer 1

你看过example in the documentation吗？

请注意，您还需要提供 [frameworkComponents] 网格属性以便网格知道使用 header 组件：

 this.frameworkComponents = { agColumnHeader: CustomHeader };

Answer 2

如果您在 2022 年来到这里并且您使用的不是最新版本 ag-grid，请在此处检查正确的版本文档：

https://www.ag-grid.com/archive/

对于我来说，25.3 版本，仍然需要像@Shuheb 所说的那样使用 frameworkComponents，但是最新版本 27.3 文档不再有这个属性。

正如 25.3 文档所说，有两种方法可以注册自定义组件：

按名字。
直接引用。

按名字

export class AppComponent {
  frameworkComponents: [
      'cubeComponent': CubeComponent
  ];          
  columnDefs: [
      {
          headerName: "Cube",
          field: "value",
          cellRenderer: 'cubeComponent',     
      }
  ]

  //...other properties & methods
}

直接引用

export class AppComponent {
  columnDefs: [
      {
          headerName: "Cube",
          field: "value",
          cellRendererFramework: CubeComponent,     
      }
  ]

  //...other properties & methods
}

Angular 农业网格出错："Could not find component class XXX, did you forget to configure this component"

Error with Angular ag-grid: "Could not find component class XXX, did you forget to configure this component"

javascript

ag-grid

angular