Question

我最近发现了ag-grid，并试图将其集成到我现有的有角度的项目中。目前，我正在尝试弄清楚自定义单元格渲染器是如何工作的。最后，我想根据单元格的值在某些单元格中放置（某种程度上）复杂的HTML语句。但是目前，我只想将内容（简单字符串）包装在标记中。

基本上，我已经完成了所有必要的工作，即：

创建了basic-render.component.ts，
将所需的行添加到了app-module.ts
，并将所有相关的ag-grid内容添加到正在使用/显示ag-grid的组件中。

一切正常，也将cellrenderer应用于细胞！但是问题是：标记不是解释为HTML，而是解释为字符串，并显示为字符串！

我的basic-cellrendeer.component.ts看起来像这样：

import { Component} from '@angular/core'; import { AgRendererComponent } from 'ag-grid-angular'; @Component({ selector: 'basic-cell', template: `{{valueBasic()}}` }) export class BasicRenderer implements AgRendererComponent { private params:any; agInit(params:any):void { this.params = params; } refresh(params: any): boolean { this.params = params; return true; } private valueBasic():string { return "<b>" + this.params.value + "</b>"; } }

我的app.component.ts中有这个

columnDefs = [ {headerName: 'Make', field: 'make', cellRenderer: 'BasicRenderer'}, {headerName: 'Model', field: 'model'}, {headerName: 'Price', field: 'price'} ];

正如我说的那样，表已正确显示，但第一列如下所示：' value1 '，' value2 '等...

但是有趣的是，当将标签放入这样的模板中时，它会起作用：

template: `<b>{{valueBasic()}}</b>`

但这不是真正的解决方案，因为最后，当一切正常时，我想包括更复杂的HTML语句，这些语句需要由像我在此处尝试实现的功能返回。

Answer 1

要呈现 OWN （超出角度编译范围）HTML，您必须将其包装

情况1： [innerHtml]="valueBasic()"

情况2： [innerHtml]="{{valueBasic()}}"

include a typoscript，您可以了解有关角度插值的更多信息

更新

要使styles有效，您必须创建另一个管道

import { DomSanitizer } from '@angular/platform-browser'
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform  {
  constructor(private sanitized: DomSanitizer) {}
  transform(value) {
    return this.sanitized.bypassSecurityTrustHtml(value);
  }
}

并且可以像这样使用它：

<div [innerHtml]="valueBasic()| safeHtml"></div>

Answer 2

我们可以使用CellRenderer函数为每个单元格创建一个自定义HTML模板，如下所示。我的工具提示下有一个链接，但我不想显示我使用过innerHTML的锚标签的href。

{
      //field: 'TOOL_TIP',
      headerName: 'Tooltip',
      filter: 'agTextColumnFilter',
      cellRenderer: params => {
        var a = document.createElement('div');
        a.innerHTML = params.data.TOOL_TIP;
        return a;
      },
      tooltip: (params) => '' + params.value
    }

ag-grid cellrenderer：将html标签添加到单元格中，但不在模板中，而是作为函数的返回值

2 个答案: