我正在创建一个角度组件,它显示突出显示的 HTML 代码及其执行结果。显示的 HTML 代码位于 pre html 元素内,至于结果的预览,它是硬编码的:
<pre class="prettyprint lang-html">
<button type="button" class="btn btn-danger">Danger</button> <br> <p> Hello World! </p>
</pre>
<button type="button" class="btn btn-danger">Danger</button>
<p> Hello Wolrd </p>
使用该组件的结果如下下列的 https://i.stack.imgur.com/sRE85.png
现在我想做的就是将此 HTML 代码作为输入传递给该组件。我尝试使用以下字符串将代码作为字符串传递:
<button type=\"button\" class=\"btn btn-danger\">Danger</button> <br> <p> Hello World! </p>
显示为字符串且未执行的输入显示为 HTML 代码:image https://i.stack.imgur.com/3QGuA.png
我如何使用此输入字符串 1. 将其显示为 html 代码并 2. 执行此代码以预览结果?否则,我应该使用什么类型作为输入?
感谢您的帮助。
解决方案是创建一个绕过安全信任 html 的自定义管道:
import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
@Pipe({name: 'sanitizeHtml'})
export class SanitizeHtmlPipe implements PipeTransform {
constructor(private _sanitizer:DomSanitizer) {
}
transform(v:string):SafeHtml {
return this._sanitizer.bypassSecurityTrustHtml(v);
}
}
在模块中声明它并在要显示 HTML 字符串的位置使用它:
<div [innerHTML]=" yourHTMLstring | sanitizeHtml "> </div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)