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

Question

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

有没有一种方法可以在 Ag-Grid 中渲染单元格，而不指定完整的组件，继承自 AgGrid 渲染器？例如，我可以只使用 ng-template 和 #id 引用，以便我可以以某种方式传递给 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",
    ...
}

Answer 2

不，我认为这是不可能的。

我已经尝试实现它好几天了，因为我有一个代码库，我正在重构以使用之前使用过的ag-grid

我认为我们必须采取稍微冗长的方法并使用自己的模板设置组件。他们有关于如何做到这一点的很好的文档（https://www.ag-grid.com/angular-data-grid/components/），我能够使用孩子与家长的沟通来减少将 ng-template 拆分为自己的组件所需的重构量。

我同意，如果他们在我们需要相对简单的单元组件时添加对 ng-template 引用的支持，那就太棒了。