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

Question

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

自定义.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'
      };

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

Answer 1

看起来您在注册自定义工具提示时遇到问题

在我的 app.module.ts

我会做类似下面的事情 -

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

从官方 ag 网格文档中检查这个github 示例