如何在 Angular 6 中呈现转义的 html答案

【问题标题】：How to render escaped html in Angular 6如何在 Angular 6 中呈现转义的 html
【发布时间】：2020-05-09 15:13:30
【问题描述】：

我有一个包含转义 HTML 的字符串响应，我尝试使用 innerHTML 在 div 中呈现该响应。该表未呈现。相反，我将输出视为带有表格标签的未转义 html：<table width=583px><tr><td>Sunshine</td><td>Unicorns</td></tr></table>。有解决办法吗？

在我的 test.component.ts 中，

public testStringWithEscape = '&lt;table width=583px&gt;&lt;tr&gt;&lt;td&gt;Sunshine&lt;/td&gt;&lt;td&gt;Unicorns&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;';

在 test.component.html 中，

<div [innerHtml]="testStringWithEscape"></div>

P.S: 我知道我们在 javascript/angular JS 中有解决方案。但我特别想了解 Angular4/6/8 中是否有办法。

【问题讨论】：

可以将字符串替换为html标签See this answer
所以，api响应是转义的html，我们需要在应用程序中渲染响应。
有几种方法可以做到这一点See this answer，在发布任何问题之前先进行研究:)
我正在寻找 Angular 6/8 特定解决方案。无论如何，谢谢！

标签： angular angular6 escaping innerhtml

【解决方案1】：

创建一个管道怎么样？

What the right way unescape html entities in Angular?

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'unescape'
})
export class UnescapePipe implements PipeTransform {

  transform(value: any, args?: any): any {
    const doc = new DOMParser().parseFromString(value, 'text/html');
    return doc.documentElement.textContent;
  }

}

然后

<div [innerHtml]="testStringWithEscape|unescape"></div>

【讨论】：

【解决方案2】：

你可以使用这个功能：

function htmlDecode(input){
    var e = document.createElement('div');
    e.innerHTML = input;
    return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
}

用法见here

【讨论】：