提问者:小点点

显示包含angular 7中的HTML代码的字符串


我有一个包含以下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是我构建的角度组件

我正在尝试将整个字符串作为HTML代码插入到我的HTML文件中

typescript文件:

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

HTML文件:

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

这将在屏幕上以字符串的形式打印实际的HTML代码。


共1个答案

匿名用户

您需要使用DomSanitizer并使用BypassSecurityTrusthTml方法告诉angular您的内容是安全的。

https://angular.io/guide/security#sanitization-and-security-contexts