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

Posted 2023-05-07

【中文标题】如何在 Angular 6 中呈现转义的 html

【英文标题】：How to render escaped html in Angular 6

【发布时间】：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 = '<table width=583px><tr><td>Sunshine</td><td>Unicorns</td></tr></table>';

在 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 特定解决方案。无论如何，谢谢！

【参考方案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