angular - 在ag-grid/Angular 5中将ng-template用作cellRenderer

似乎每当您想通过不仅仅是文本转换的方式自定义单元格的输出时，就需要一个单元格渲染器。但它需要一个全新的组件来实现这个目标。一般来说，这种方法很好，但是我发现，在我的项目中，我经常使用网格，并且我需要它们的自定义单元渲染器。大多数情况下，它们也不能重复使用，并且对于特定网格是特定的。为了提供HTML模板结构，在另一个组件中创建（存储在文件系统某个地方）的开销似乎对我来说有点过分了。
有没有一种方法可以在ag网格中呈现一个单元，而不指定从ag grid渲染器继承的完整组件？例如，我可以只使用带有id引用的ng模板，以某种方式传递给ag grid吗？

最佳答案

下面是在单元格呈现器自定义组件中使用ng模板的示例，您可以创建多个跨距，并且可以使用ngif显示、隐藏或控制基于属性显示的元素。在下面的代码中，我只使用一个跨度，您可以根据需要进行修改。另外，在编写了这个单元渲染器组件之后，我在coldfs中将名称分配给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",
    ...
}

关于angular - 在ag-grid/Angular 5中将ng-template用作cellRenderer，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48954875/