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

时间:2020-06-04 21:01:20

标签: javascript angular ag-grid ag-grid-angular

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

custom.ts文件

let minValue, maxValue
const ascendingArray = arr.sort((a,b) => a - b)

const smallestNumber = ascendingArray[0]
const biggestNumber = ascendingArray[ascendingArray.length -1]

if(smallestNumber !== biggestNumber){

    const biggestArray = arr.filter((number) => {
        return number !== smallestNumber
     })

     const smallestArray = arr.filter((number) => {
         return number !== biggestNumber
      })

     minValue = smallestArray.reduce((a,b) => a + b, 0)
     maxValue = biggestArray.reduce((a,b) => a + b, 0)
     console.log(minValue, maxValue);
}
else{
    const arraySliced = arr.slice(0, 4)

    const value = arraySliced.reduce((a,b) => a + b, 0)
    console.log(value, value);
}    

custom.html文件:

{{params.value}}

我将组件导入了app.module.ts文件,并将其添加为声明和withComponents的一部分

app.module.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;
  }
}

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

1 个答案:

答案 0 :(得分:0)

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

在我的app.module.ts

我会做下面的事情-

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

从官方的Ag网格文档中检查此github example