Ag-grid 自定义工具提示组件模板未显示

Joh*_*son 2 ag-grid angular ag-grid-angular

使用 ag-grid 和 ng7,我创建了一个自定义工具提示组件,将其绑定到列定义 tooltipComponent,以及 headertooltip 和 headername。当我将鼠标悬停在标题上时,console.log会调用 from agInit,但不会呈现模板

基于官方的 ag-grid 工具提示指南,有一种方法getGui可以渲染 html。也试过了,悬停在标题上时没有显示。

    <ag-grid-angular
      #agGrid
      [frameworkComponents]="frameworkComponents"
      ...
    ></ag-grid-angular>
Run Code Online (Sandbox Code Playgroud)
    headerName: 'Atheltes`
    tooltipComponent: 'customTooltip',
    headerTooltip: 'Helper text should show here'
    this.frameworkComponents = { customTooltip: CustomTooltipComponent };
Run Code Online (Sandbox Code Playgroud)
@Component({
    selector: 'ffp-tooltip-component',
    template: `<div>It should show helper text</div>`,
})
export class CustomTooltipComponent implements ITooltipAngularComp {
    agInit(params: ITooltipParams) {
       console.log('this console log works!!')
       // console.log above gets called, however, no template is shown.
    }

    getGui(): any {
    }
}

Run Code Online (Sandbox Code Playgroud)

我希望当我将鼠标悬停在标题上时Atheletes,我应该看到一个工具提示文本Helper text should show here.

Gre*_*eek 9

我在https://www.ag-grid.com/javascript-grid-tooltip-component 上尝试了 ag-grid 提供的 Plunker 示例,发现了一些可能有帮助的事情:

  1. 虽然我在文档中找不到它,但似乎列定义必须有一个tooltipField条目,否则工具提示将不显示。

  2. 在工具提示显示之前有一个明显的延迟,可能是 3 秒左右,因此您需要将鼠标悬停在单元格上至少那么长时间才能看到工具提示。