我有一个包含以下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代码。
您需要使用DomSanitizer并使用BypassSecurityTrusthTml
方法告诉angular您的内容是安全的。
https://angular.io/guide/security#sanitization-and-security-contexts