如何使用材料工具提示为 ag-grid 制作自定义工具提示组件答案

【问题标题】：how to make a custom tooltip component for ag-grid using material tooltip如何使用材料工具提示为 ag-grid 制作自定义工具提示组件
【发布时间】：2020-01-02 01:40:42
【问题描述】：

当前的角度 ag-grid 工具提示示例不起作用。

https://stackblitz.com/edit/angular-ag-grid-tooltip-example-fb7nko

Javascript/打字稿。运行 Angular 8 和最新的 ag-grid 版本。我试图按照 plunker 的例子去 T 并且没有运气。我现在正在尝试这个。我有一个名为 CustomTooltipComponent 的组件，它在从我的 .ts 文件中获取 {{data}} 的模板中有一个动态 mat-tooltip。工具提示没有显示，所以我输入了一个跨度并显示，但它以纯文本显示。创建的组件也已添加到我的入口和声明模块中。

<<<----   component that wants the tooltip --->

this.gridOptions = {
      deltaRowDataMode: true,
      getRowNodeId: (data) => data.name,
      onRowDoubleClicked: (data) => this.selectRow(data),
      rowSelection: 'single',
      defaultColDef: {
        sortable: true,
        resizable: true,
        tooltipComponentFramework: CustomTooltipComponent,
        tooltipValueGetter: (params: ITooltipParams) => params.data,
      }
    };```

      this.columnDefs = [
        {
          headerName: 'Name',
          field: 'name',
          sort: 'asc',
         // tooltipField: 'name'
        }



<<<-------- tooltip component .ts ------->>>

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

@Component({
  selector: 'app-custom-tooltip',
  templateUrl: './custom-tooltip.component.html',
  styleUrls: ['./custom-tooltip.component.scss'],
})
export class CustomTooltipComponent implements ITooltipAngularComp {

  public params: ITooltipParams;
  public data: any;

  constructor() { }

  agInit(params: ITooltipParams): void {
    this.data = params.api.getDisplayedRowAtIndex(params.rowIndex).data;
  }

}

<<<----------- tooltip component .html ---->>>

<span matTooltip="{{data.name}}"></span>

<div>
<p><span>Name: </span>{{data.name}}</p>
<p><span>Created by: </span>{{data.createdBy}}</p>
<p><span>Modified by: </span>{{data.modifiedBy}}</p>

</div>

希望工具提示以 mat-tooltip 格式显示期望 toolTipParams: () 使用这种方法

【问题讨论】：

标签： javascript angular typescript ag-grid-angular

【解决方案1】：

它并不完美，但我能够在使用上面@adrian 提到的cellRendererFramework 时让它工作。这是我修复的一个工作示例，它能够在角度 ag-grid 自定义组件中使用 [matTooltip] 及其所有功能。包括作为字符串数组传递的换行符。感谢大家的帮助！

https://stackblitz.com/edit/angular-ag-grid-tooltip-example-ywzxle

【讨论】：

【解决方案2】：

就数据问题而言，您的 StackBlitz 与此问题有点不同步，但您需要确保数据对象上的属性与行数据上的属性具有相同的大小写；如果您将 tool-tip.component.html 中的 fname 更改为 fName 和 lname 更改为 lName，那么您应该会看到数据正确通过。

关于材质工具提示，设计用途是您有一个带有matTooltip 属性的元素（例如span），然后当您将鼠标悬停在该元素上时，您将看到使用该元素的内容呈现的工具提示属性。但是，您在这里使用它的方式是尝试使用附加在 ag-Grid 正在呈现的工具提示内的材质工具提示来渲染元素，这就是您看到纯文本的原因。如果您确实希望绕过 ag-Grid 的工具提示渲染并改用材质工具提示，那么使用custom cell renderer 可能会更幸运。

【讨论】：