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

Question

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

基于 official ag-grid tooltip guide ，有一个名为 getGui 的方法也可以渲染 html。也试过了，悬停在标题上时没有显示。

    <ag-grid-angular
      #agGrid
      [frameworkComponents]="frameworkComponents"
      ...
    ></ag-grid-angular>

    headerName: 'Atheltes`
    tooltipComponent: 'customTooltip',
    headerTooltip: 'Helper text should show here'
    this.frameworkComponents = { customTooltip: CustomTooltipComponent };

@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 {
    }
}

我希望当我将鼠标悬停在标题 Atheletes 上时，我应该会看到 Helper text should show here 的工具提示文本。

Answer 1

我在 https://www.ag-grid.com/javascript-grid-tooltip-component 试用了 ag-grid 提供的 Plunker 示例并找到了一些可能有帮助的东西:

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

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