更新

Question

我遇到了一个问题，我想用Pipe将生成的HTML代码渲染到材质表中，但是它不起作用。

代码如下：

pipe.ts

import { Pipe, PipeTransform } from "@angular/core";
import * as _ from "underscore";

@Pipe({ name: "customPipeChecks" })
export class CustomPipeChecks implements PipeTransform {
  transform(
    elementValue: {},
    elementProperty: string,
    object: {},
    customPipeFunction: any,
    defaultValue: string
  ) {
    if (customPipeFunction != null && _.isFunction(customPipeFunction)) {
      console.log(customPipeFunction(elementValue, elementProperty, object));
      return customPipeFunction(elementValue, elementProperty, object);
    } else {
      if (defaultValue) {
        return defaultValue;
      }
      return elementValue;
    }
  }
}

生成的函数

  private setCustomValueFunction() {
    this.customValueFunction = (
      elemValue: string,
      elemKey: string,
      elem: {}
    ) => {
      if (elemKey === "vin") {
        elemValue = "<button>zrdzdrz</button>";
      }
      return elemValue;
    };
  }

此函数生成HTML字符串。

HTML代码如下：


<td
     mat-cell
     *matCellDef="let cellData"
     class="{{
              cellData[colName]
                | customPipeChecks: colName:cellData:customCssFunction:' '
            }}"
     innerHtml="{{
              cellData[colName]
                | customPipeChecks: colName:cellData:customValueFunction
       }}">
</td>

加载该应用程序后，它将仅显示文本“ zrdzdrz”（所需按钮的内部HTML），而不显示按钮（用于包装文本）。

有什么建议吗？

最好的问候，

狮子座

Answer 1

非常有趣的问题。

这是StackBlitz处的演示，它将解决您的问题。

您的实现无法正常工作的原因是，Angular对注入的HTM1进行了消毒，为了绕过该问题，您的自定义管道应类似于以下代码段，其中重要的部分是DomSanitizer的使用它将以明确的方式“告诉”您要注入的HTML必须呈现的框架。

import { Pipe, PipeTransform } from "@angular/core";
import {
  DomSanitizer,
  SafeHtml
} from '@angular/platform-browser';

@Pipe({ name: "customPipeChecks" })
export class CustomPipeChecks implements PipeTransform {

  constructor(
    public sanitizer: DomSanitizer,
  ) { }
  transform() {
    return this.sanitizer.bypassSecurityTrustHtml('<button>Button content</button>')
  }
}

更新

另一个值得注意的一点是，必须以以下方式在模板中注入innerHTML， [innerHTML]

<td mat-cell *matCellDef="let element" [innerHtml]="'someString' | customPipeChecks">
    </td>

Angular无法使用Button动态呈现生成的HTML

1 个答案:

更新