我想创建一个角度应用程序来显示像Jsbin这样的实时代码预览

Question

我正在创建Angular应用，该应用可以让用户保存他的html代码（也许它具有样式和脚本标签来控制视图），并且旁边有一个实时预览。用户可以保存代码，其他用户可以查看代码和预览。由于脚本标记，我还担心安全性，并且我希望脚本仅与用户提供的代码一起使用（不允许控制或获取父框架中的数据）。所以我需要一些建议。

我已经尝试通过iframe通过'srcdoc'属性提供值来进行预览，但是看起来安全性很差。

Answer 1

在这种情况下，您无需使用iframe，只需使用innerHtml输入在div元素内呈现HTML字符串，如下所示：

<div [innerHTML]="htmlString"></div>

其中htmlString是包含HTML代码的字符串。您将必须使用DomSanitizer清理该变量的内容。

constructor(private domSanitizer: DomSanitizer){}

...

ngOnInit() {
    this.htmlString = this.domSanitizer.bypassSecurityTrustHtml(yourHTMLString);
}