如何解决从字符串获取html代码,并以角度显示
我的电子邮件正文存储在javascript /打字稿字符串(message.body)中。该字符串的内容是这样的html代码:
<div dir="ltr">test mail</div>
我正在使用角度引导程序,并且尝试了以下代码:
javascript /打字稿代码:
ShowMessage(message: MailMsg) {
const modalRef = this.modalService.open(MailModal,{ centered: true });
modalRef.componentInstance.msg = message;
modalRef.componentInstance.body = $(message.body);
}
html代码:
<div class="bodyMsg">
<div type="text/html">{{body}}</div>
</div>
我得到以下输出:[object Object]
如何正确显示该初始message.body字符串的内容?
谢谢
解决方法
将字符串直接注入组件的innerHTML属性中:
<div class="bodyMsg">
<div [innerHTML]="body | safeHtml"></div>
</div>
但是要小心XSS注入:)
,首先,我们在类中需要一个DomSanitizer实例,因此我们在构造函数中对其进行声明:
constructor(private sanitizer: DomSanitizer)
这是将字符串转换为SafeHtml对象的代码,我们可以将其导入到html代码中:
const parser = new DOMParser();
const document = parser.parseFromString(mensaje.cuerpo,'text/html');
modalRef.componentInstance.body = this.sanitizer.bypassSecurityTrustHtml(document.body.outerHTML);
最后遗漏的是告诉HTML该代码不是恶意代码,可以安全地使用[innerHTML]标签显示它:
<div [innerHTML]="body"></div>
工作!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。