Angular HTML绑定

我正在写一个Angular应用程序，我有一个HTML响应，我想显示。

我怎么做呢?如果我简单地使用绑定语法{{myVal}}，它将编码所有HTML字符(当然)。

我需要以某种方式将一个div的innerHTML绑定到变量值。

当前回答

只是在目前为止所有精彩的回答中补充一点:如果你正在使用[innerHTML]来渲染Angular组件，并且对它不能像我一样工作感到沮丧，可以看看我写的ngx-dynamic-hooks库来解决这个问题。

有了它，您可以从动态字符串/html加载组件，而不会影响安全性。它实际上也像[innerHTML]一样使用Angular的DOMSanitizer，但保留了加载组件的能力(以一种安全的方式)。

在这部《斯塔克布利茨》中可以看到它的作用。

其他回答

在Angular v2.1.1中工作

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

如果我错过了重点，我很抱歉，但我想推荐一种不同的方法:

我认为最好从服务器端应用程序返回原始数据，并将其绑定到客户端模板。这使得请求更加灵活，因为您只从服务器返回json。

对我来说，如果你所做的只是从服务器获取html并将其“原样”注入到DOM中，那么使用Angular似乎没有意义。

我了解Angular 1。x有一个html绑定，但我在Angular 2.0中还没有看到对应的绑定。不过他们以后可能会加进去。不管怎样，我还是会考虑为你的Angular 2.0应用提供一个数据api。

如果您感兴趣的话，这里有一些带有简单数据绑定的示例:http://www.syntaxsuccess.com/viewarticle/angular-2.0-examples

为了得到一个完整的答案，如果你的HTML内容是在一个组件变量中，你也可以使用:

<div [innerHTML]=componentVariableThatHasTheHtml></div>

如果你想在Angular 2或Angular 4中使用它，同时还想保持内联CSS，那么你可以使用它

<div [innerHTML]="theHtmlString | keepHtml"></div>

请参考其他最新的答案。

这适用于我:<div innerHTML = "{{myVal}}"></div> (Angular2, Alpha 33)

根据另一个SO:用angular2将HTML从服务器插入到DOM中(angular2中的通用DOM操作)，"inner-html"相当于Angular 1中的"ng-bind-html"。X

推荐文章