以HTML代码作为输入的角度组件
我正在创建一个角度组件,它显示高亮显示的HTML代码及其执行结果。显示的HTML代码位于HTML前元素中,对于结果的预览,它是硬编码的:以HTML代码作为输入的角度组件,html,angular,typescript,Html,Angular,Typescript,我正在创建一个角度组件,它显示高亮显示的HTML代码及其执行结果。显示的HTML代码位于HTML前元素中,对于结果的预览,它是硬编码的: <pre class="prettyprint lang-html"> <button type="button" class="btn btn-danger">Danger</button> <br> <p> Hello World! </p> <
<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”>危险/按钮>
p>你好,世界/p>
危险
你好,沃尔德
使用此组件的结果如下所示
现在我想做的是将这个HTML代码作为输入传递给这个组件。我尝试使用以下字符串将代码作为字符串传递:
<button type=\"button\" class=\"btn btn-danger\">Danger</button> <br> <p> Hello World! </p>
按钮类型=\“button\”类=\“btn btn danger\”>danger/button>
p>你好,世界/p>
显示为字符串而未执行的输入显示为HTML代码:
如何将此输入字符串用于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>
<div [innerHTML]=" yourHTMLstring | sanitizeHtml "> </div>