在ag grid/Angular 5中使用ng模板作为cellRenderer

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

---

有没有一种方法可以在AgGrid中渲染单元格，而不指定完整组件，从AgGrid渲染器继承？例如，我是否可以使用带有#id引用的ng模板，我可以通过某种方式将其传递到Ag网格？

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

从“@angular/core”导入{Component}；
从“ag网格角度”导入{ICellRenderAngularComp}；
@组成部分({
选择器：“工具提示单元格”，
模板：`
创建人：{{creator}}

创建日期：{crDateTime | date:'short'}}

修订人：{{revisor}}

修订日期：{{revDateTime | date:'short'}}

{{params.value}}`}）
导出类ToolTipRenderer实现ICellRenderAngularComp{
公共参数：任何；
公共创建者：任何；
公共时间：任何时间；
公共审校人：任何；
公共时间：任何时间；
agInit（参数：任意）：无效{
this.params=params；
this.creator=params.data[“creator”]；
this.crDateTime=参数数据[“CrDate”]；
this.revisor=参数数据[“revisor”]；
this.revDateTime=params.data[“RevDate”]；
}
刷新（）：布尔值{
返回false；
}
}
变量f1={
cellRenderer:“工具提示渲染器”，
...
}

是的，您可以在组件中使用ng模板，并将其作为单元渲染器传递给ag grid，在该组件中，您可以检查参数/变量，并使用ngif启用或禁用所需的HTML格式。通过这种方式，您只能有一个组件来处理所有网格的单元渲染？如果您有相关内容要添加，请回答实际问题，而不是发明我没有要求的奇怪且低效的解决方案。@rattkin，您是否找到了自定义单元的简单方法？不幸的是，没有。我正在为CellRenderer使用外部类，这相当麻烦。我很感激你的好意，但你误解了这个问题。另外，这个解决方案非常糟糕。在我的书中，将所有代码和字符串编程的依赖项聚合在一起的大型笨重组件是不允许的。您所说的字符串编程是什么意思？为了在ag网格单元中呈现引导工具提示，除了创建自定义组件外，没有其他方法，因为如果编写html回调单元呈现器，则不会在单元中呈现工具提示。也许我只是浪费时间回答你的问题。我道歉。