Angular6 无法使用工具提示组件自定义ag栅格自定义工具提示

我需要在angular 6中为ag Grid实现一个定制的工具提示。 以下是我的代码：

app.component.ts

import { Component, OnInit } from '@angular/core';
import { MyTooltipComponent } from '../my-tooltip/my-tooltip.component';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit {

  private frameworkComponents = {};

  constructor() {
    this.frameworkComponents = { myTooltipComponent: MyTooltipComponent };
  }

  aggridConfig0: any = {
      rowData: [],
      columnDefs: [],
      defaultColDef: {
        filter: true,
        sortable: true,
        resizable: false,
        editable: false,
        enableRowGroup: false,
        tooltipComponent: "myTooltipComponent"
      },
      cubeXCreateAgGridColumn: (data) => {
        let temp = [];
        data.forEach((val, key) => {
            if (key == 0) {
              Object.keys(val).forEach((name) => {
                  temp.push({
                    headerName: name,
                    field: name,
                    tooltipField: tooltipName
                  })
              })
            }
        });
        return temp;
      }
  }

  private gridApi0;
  private gridColumnApi0;
  agGrid;
  onGridReady0(params) {
    this.agGrid = [
      {
        "header1": "abc",
        "header2": "efg"
      },
      {
        "header1": "def",
        "header2": "xyz"
      }
    ];
    this.gridApi0 = params.api;
    this.gridColumnApi0 = params.columnApi;
    this.aggridConfig0.rowData = this.agGrid;
    this.gridApi0.setColumnDefs(this.aggridConfig0.cubeXCreateAgGridColumn(this.aggridConfig0.rowData));
  }
}

import {Component, ViewEncapsulation} from '@angular/core';
import {ITooltipAngularComp} from "@ag-grid-community/angular";

@Component({
  selector: 'my-tooltip-component',
  template: `
      <div class="custom-tooltip">
          <p><span>Header 1 : {{data.header1}}</span></p>
          <p><span>Header 2 : {{data.header2}}</span></p>
      </div>`,
  styles: [
      `
          :host {
              position: absolute;
              width: 150px;
              height: 70px;
              border: 1px solid cornflowerblue;
              overflow: hidden;
              pointer-events: none;
              transition: opacity 1s;
          }

          :host.ag-tooltip-hiding {
              opacity: 0;
          }

          .custom-tooltip p {
              margin: 5px;
              white-space: nowrap;
          }

          .custom-tooltip p:first-of-type {
              font-weight: bold;
          }
      `
  ]
})
export class MyTooltipComponent implements ITooltipAngularComp {

  private params: any;
  private data: any;

  agInit(params): void {
      this.params = params;
      console.log("params here not printing............",params)
      this.data = params.api.getDisplayedRowAtIndex(params.rowIndex).data;
      this.data.color = this.params.color || 'white';
  }
}

app.component.html

<ag-grid-angular class="ag-theme-balham base-padding" style="height: 500px" 
                                  [rowData]="aggridConfig0.rowData" 
                                  [columnDefs]="aggridConfig0.columnDefs" 
                                  [defaultColDef]="aggridConfig0.defaultColDef" 
                                  [animateRows]="true" 
                                  [suppressDragLeaveHidesColumns]="true" 
                                  (gridReady)="onGridReady0($event)"
                                  [frameworkComponents]="frameworkComponents">
</ag-grid-angular>

请在此处找到stackblitz url:

我无法将自定义数据从my-tooltip.component.ts显示到header1列工具提示。 我已提述—

请帮帮我。提前感谢

现在问题已经解决了。 我导入的AgGrdModule存在问题。它以前是从ag栅格角度库导入的。 我把它改成了@ag-grid-community/angular

在我的app.module.ts中

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AgGridModule } from 'ag-grid-angular';
import 'ag-grid-enterprise';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing/app-routing.module';
import { MyTooltipComponent } from './component/my-tooltip/my-tooltip.component';
@NgModule({
declarations: [
AppComponent, MyTooltipComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
AgGridModule.withComponents([MyTooltipComponent])
],
providers: [ ],
bootstrap: [AppComponent]
})
export class AppModule { }

import { AgGridModule } from "@ag-grid-community/angular";

---

谢谢大家

你可以在plunk或stackblitz上复制你的问题，以便其他人可以轻松地帮助你吗？这是我创建的快速url-这对我不起作用。还有其他建议吗？