Как отрисовать экранированный html в Angular 6

Question

У меня есть строковый ответ, содержащий экранированный HTML, который я пытаюсь отобразить внутри div, используя внутренний HTML. Таблица не обрабатывается. Вместо этого я вижу результат как неэкранированный 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>

PS: Я знаю, что у нас есть решение для этого в javascript / angular JS. Но я специально пытаюсь понять, есть ли способ в Angular4 / 6/8.

Answer 1

Как насчет создания канала?

Как правильно unescape html сущностей в 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>

Answer 2

Вы можете использовать эту функцию:

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

см. здесь для использования