Ag-grid 自定义工具提示组件不起作用

Question

我的自定义工具提示非常简单

custom.ts 文件

import { Component } from '@angular/core';
import {ITooltipAngularComp} from 'ag-grid-angular';

@Component({
  selector: 'app-custom-columnheader-tooltip-component',
  templateUrl: './custom-columnheader-tooltip-component.html',
  styleUrls: ['./custom-columnheader-tooltip-component.css']
})

export class CustomColumnheaderTooltipComponent implements ITooltipAngularComp {
  private params: any;

  agInit(params): void {
    console.log("test tooltip");
    this.params = params;
  }
}

custom.html 文件：

{{params.value}}

我在 app.module.ts 文件中导入了组件，并将其作为声明的一部分添加到 withComponents 中

app.module.ts 文件：

    import {CustomColumnheaderTooltipComponent} from '...';

    declarations: [
    CustomColumnheaderTooltipComponent],
    imports: [AgGridModule.withComponents([CustomColumnheaderTooltipComponent])]

my main component which calls this custom tooltip is as follows:

main.ts
    frameworkComponents = {
        customTooltip: CustomColumnheaderTooltipComponent}

    IN my default col Definitions:
      defaultColDef: ColDef = {
        enableRowGroup: true,
        filter: true,
        resizable: true,
        sortable: true,
        autoHeight: true,
        valueFormatter: this.cellValueFormatter.bind(this), // numeric formatting
        cellRenderer: this.cellRenderer,
        headerTooltip: 'hi',
        tooltipComponent:'customTooltip'
      };

我希望标题工具提示字符串将被工具提示组件拾取，并作为该组件的一部分显示为“标题名称：hi”，但我的应用程序仅将“hi”显示为工具提示。我看不到 agInit() 中的控制台日志记录，基本上它没有连接到该组件以获取工具提示。任何建议都受到高度赞赏。

Answer 1

您似乎在注册自定义工具提示时遇到问题

在我的 app.module.ts 中

我会做类似下面的事情 -

imports: [
    BrowserModule,
    FormsModule,
    AgGridModule.withComponents(
        [CustomColumnheaderTooltipComponent]
    )
],
declarations: [
    ............,
    CustomColumnheaderTooltipComponent,
    ...........
],

从官方 ag 网格文档中查看 github example