从JSON渲染缩小的HTML文本，并将模型值绑定到Angular 5中的HTML

Question

export class SetUpAppPopupComponent {
constructor(public sanitizer: DomSanitizer) { }
ngOnInit() {
this.IFrameUrl = this.sanitizer.bypassSecurityTrustResourceUrl("https://angular.io/");
}

getAppHtml() {
var MinifiedHtml = "<div> <iframe class="col-md-12" style="display:block;height:100%" [src]="IFrameUrl" frameborder="0" allowFullScreen="true"></iframe> </div>"
return this.sanitizer.bypassSecurityTrustHtml(MinifiedHtml);
}
}

。.html

<div [innerHtml]="getAppHtml()"></div>

如果您查看上面的示例 HTML 正在呈现，但 JSON 模型对象"IFrameUrl"未绑定到 IFrame 标记。有没有办法实现它？

Answer 1

您不能将所有标记保留在.html中，并在 iframe 的 src 中使用 IFrameUrl 属性吗？

.html
<div>
<iframe class="col-md-12" style="display:block;height:100%" [src]="IFrameUrl" frameborder="0" allowFullScreen="true"></iframe>
</div>

无论如何，我想问题在于使用这个经过净化的字符串 won 编译 IFramrUrl 属性中的值。 也许这有效：

var MinifiedHtml = `<iframe class="col-md-12" style="display:block;height:100%" src="${IFrameUrl}" frameborder="0" allowFullScreen="true"></iframe>`

PS：请注意，您可以(应该(使用模板字符串来构建带有插值 https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/template_strings 的复杂html/字符串