在 ag-grid / Angular 5 中使用 ng-template 作为 cellRenderer

Question

似乎每当您想通过文本转换以外的方式自定义单元格的输出时，您都需要一个 cellRenderer。但它需要一个全新的组件来实现这一目标。一般来说，这种方法很好，但我发现在我的项目中我经常使用网格，我需要为它们自定义单元格渲染器。大多数情况下，它们也不能重复使用并且特定于特定网格。仅仅为了提供 HTML 模板结构而创建（并将其存储在文件系统中的某个位置）另一个组件的开销对我来说似乎有点矫枉过正。

有没有一种方法可以在 Ag-Grid 中渲染单元格，而无需指定完整的组件，继承自 AgGrid 渲染器？例如，我可以只使用带有#id 引用的 ng-template，我可以以某种方式将其传递给 Ag-Grid 吗？

Answer 1

以下是在单元格渲染器自定义组件中使用 ng-template 的示例，您可以创建多个跨度，并且可以使用 ngif 显示和隐藏或根据属性控制要显示的元素。在下面的代码中，我只使用了一个跨度，您可以根据需要进行修改。同样在编写完这个单元格渲染器组件后，我将名称分配给coldefs中ag-grid的单元格渲染器。

import { Component } from "@angular/core";
import { ICellRendererAngularComp } from "ag-grid-angular";

@Component({
    selector: 'tooltip-cell',
    template: `<ng-template #popTemplate>
                    <div class="tooltip-renderer">
                         Created By: {{creator}} <br/>
                         Created On: {{crDateTime | date:'short'}} <br/>
                         Revised By: {{revisor}} <br/>
                         Revised On: {{revDateTime | date:'short'}} <br/>
                    </div>
                </ng-template>
                <span [tooltip]="popTemplate" placement="left" container="body" triggers="mouseenter mouseleave dblclick">{{params.value}}</span>` })

export class ToolTipRenderer implements ICellRendererAngularComp {
    public params: any;
    public creator: any;
    public crDateTime: any;
    public revisor: any;
    public revDateTime: any;

    agInit(params: any): void {
        this.params = params;
        this.creator = params.data["Creator"];
        this.crDateTime = params.data["CrDate"];
        this.revisor = params.data["Revisor"];
        this.revDateTime = params.data["RevDate"];
    }
    refresh(): boolean {
        return false;
    }
}
var colDef1 = {
    cellRenderer: "tooltipRenderer",
    ...
}