如何使用材料工具提示为 AG 网格创建自定义工具提示组件

Question

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

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

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

<<<----   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-工具提示格式显示 期望工具提示参数：((使用此方法

Answer 1

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

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

Answer 2

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

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