angular - ag-grid cellrenderer : adding html tags to cells but not in the template but as return values of a function

Question

我最近发现了 ag-grid 并正在尝试将其集成到我现有的 Angular 项目中。目前，我正在尝试弄清楚自定义单元格渲染器是如何工作的。最后，我想根据单元格值在某些单元格中放置(有点)复杂的 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( Angular 编译)HTML，您必须将其包装

案例一:[innerHtml]="valueBasic()"

案例二:[innerHtml]="{{valueBasic()}}"

Here您可以阅读有关 Angular 插值的更多信息

更新

要使 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>