Отображаемая строка, содержащая HTML код в angular 7

Question

У меня есть строка, содержащая следующий код HTML:

             <div>
                <TextSubtitle [color]="'#B3B4B4'" [bold]="'true'">Datos Personales del Solicitante</TextSubtitle>
                <div style="margin-top: 20px;display: flex;justify-content: space-between">
                    <InputItem style="width: 47%" [label]="'Primer nombre *'"></InputItem>
                    <InputItem style="width: 47%" [label]="'Segundo nombre *'"></InputItem>
                </div>
                <div style="margin-top: 10px;display: flex;justify-content: space-between">
                    <InputItem style="width: 47%" [label]="'Apellido paterno *'"></InputItem>
                    <InputItem style="width: 47%" [label]="'Apellido materno *'"></InputItem>
                </div>
                <div style="margin-top: 10px;display: flex;justify-content: space-between">
                    <InputItem style="width: 47%" [label]="'Fecha de nacimiento *'"></InputItem>
                    <InputItem style="width: 47%" [label]="'Género *'"></InputItem>
                </div>
                <div style="margin-top: 10px;display: flex;justify-content: space-between">
                    <InputItem style="width: 47%" [label]="'Ocupación *'"></InputItem>
                    <InputItem style="width: 47%" [label]="'Dependientes económicos *'"></InputItem>
                </div>
                <div style="margin-top: 10px;display: flex;justify-content: space-between">
                    <InputItem style="width: 47%" [label]="'Estado civil *'"></InputItem>
                    <InputItem style="width: 47%" [label]="'Número de hijos *'"></InputItem>
                </div>
                <div style="margin-top: 10px;display: flex;justify-content: space-between">
                    <InputItem style="width: 47%" [label]="'RFC *'"></InputItem>
                    <InputItem style="width: 47%" [label]="'CURP *'"></InputItem>
                </div>
            </div> 

примечание: InputItem - это angular компонент, который я создаю

Я пытаюсь вставить всю строку как HTML код в мой HTML файл

машинописный файл:

ngOnInit() {
    this.doc = new DOMParser().parseFromString(myString, "text/html");
  }

HTML файл:

<div>
    {{doc.firstChild.innerHTML}}
</div>

это напечатает фактический код HTML в виде строки на экране.

Answer 1

Вам необходимо использовать DomSanitizer и сообщить angular ваш контент с помощью метода bypassSecurityTrustHtml. Также вам нужно заменить firstChild.innerHTML на doc.body.outerHTML, если вы хотите отобразить весь документ.

Вот пример StackBlitz