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",
    ...
}

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

1 个答案: