Javascript 从数据库向angular 2中注入Iframe

我需要关于angular 2中Iframe的帮助

首先，将iframe直接嵌入到组件模板中效果很好

<iframe 
    src='http://plnkr.co/edit/zZ0BgJHvQl5CfrZZ5kzg?p=preview | safeUrl' 
    allowtransparency='true'
    frameborder='0'
    scrolling='no'  
    width='80%'
    height='500'>
</iframe>

这一切都很好

<iframe 
    src='http://plnkr.co/edit/zZ0BgJHvQl5CfrZZ5kzg?p=preview | safeUrl' 
    allowtransparency='true'
    frameborder='0'
    scrolling='no'  
    width='80%'
    height='500'>
</iframe>

问题是，当我想从数据库加载这个iframe时，会抛出一个错误，并且不会呈现这个iframe

 ERROR: browser_adapter.js:90WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).

此Iframe从nosql数据库中获取，并返回到嵌套在HTML脚本中的angular 2

下面是从数据库中获取内容的示例：

"<h2>Some text returned from the DB</h2>
<iframe 
    src='http://plnkr.co/edit/zZ0BgJHvQl5CfrZZ5kzg?p=preview | safeUrl' 
    allowtransparency='true'
    frameborder='0'
    scrolling='no'  
    width='80%'
    height='500'>
</iframe>
<p>Some more text returned from the DB</p>"

“从数据库返回的某些文本
从数据库返回的更多文本
“

关于如何在从数据库返回时在angular 2上呈现此内容，有什么建议吗？谢谢

更新

这就是我如何将嵌套在一块HTML代码中的Iframe从数据库添加到{{（post$| async）？.description}的方法，如下所示

<h2>{{ (post$ | async)?.title }}</h2>
<div innerHTML="{{ (post$ | async)?.description }}" ></div>

{（post$| async）？.title}

谢谢

使用

<div [innerHTML]="(post | async)?.content | safeHtml }}" >

---

使用

src=“{…}}”

的字符串绑定不适用于

|safeHtml

，而是使用

[src]=“…|safeHtml”

这正是导致错误的代码吗？好吧，这个错误只是由通过绑定添加的值引起的，但是对于

是的，这就是确切的代码，当我将它直接嵌入到模板中时，它可以正常工作，但是当我从数据库中读取它时，我得到了错误，你从数据库中到底读取了什么？这是不可能的http://plnkr.co/edit/zZ0BgJHvQl5CfrZZ5kzg?p=preview |由于上述评论中提到的原因，safeUrl“

实现了您的预期。我猜您得到的错误消息不是来自URL，而是您从DB读取并添加到DOM的整个HTML块。如何添加它？我正在将它添加到模板中，如下所示

页面上带有render的HTML脚本的其余部分。谢谢谢谢@Günter Zöchbauer是的，当我将其直接嵌入模板时，这是有效的，但当从数据库获取它时，这不是有效的……请在您的问题中提供更多的上下文。很好的一个@Günter Zöchbauer！Plunker启动并在屏幕上渲染！！我完全按照指示去做，效果很好。最后我像这样把它保存在数据库里，它成功了

“

再次感谢！很高兴听到你这么说。不过你应该删除

|safeUrl

部分。如果这没有导致错误，那只是偶然的。

src='http://plnkr.co/edit/zZ0BgJHvQl5CfrZZ5kzg?p=preview | safeUrl'