我正在写一个Angular应用程序,我有一个HTML响应,我想显示。
我怎么做呢?如果我简单地使用绑定语法{{myVal}},它将编码所有HTML字符(当然)。
我需要以某种方式将一个div的innerHTML绑定到变量值。
我正在写一个Angular应用程序,我有一个HTML响应,我想显示。
我怎么做呢?如果我简单地使用绑定语法{{myVal}},它将编码所有HTML字符(当然)。
我需要以某种方式将一个div的innerHTML绑定到变量值。
当前回答
您可以使用几种方法来实现该解决方案。正如已经批准的答案中所说,你可以使用:
<div [innerHTML]="myVal"></div>
根据你想要实现的目标,你也可以尝试其他东西,比如javascript DOM(不推荐,DOM操作很慢):
演讲
<div id="test"></test>
组件
var p = document.getElementsById("test");
p.outerHTML = myVal;
属性绑定
Javascript DOM外部HTML
其他回答
只需简单地使用[innerHTML]属性在你的HTML,如下所示:
<div [innerHTML]="myVal"></div>
你的组件中是否有包含html标记或 需要在模板中显示的实体?传统的 插值不会工作,但是innerHTML属性绑定会 救援。
使用{{myVal}}不能正常工作!这不会拾取HTML标签,如<p>, <strong>等,只将其作为字符串传递…
假设你的组件中有这样的代码:
碰到弦!弦!弦!< /埃隆·马斯克>”
如果你使用{{myVal}},你会在视图中得到这个:
<strong>Stackoverflow</strong> is <em>helpful!</em>
但是使用[innerHTML]="myVal"使结果像预期的那样:
Stackoverflow很有用!
如果我错过了重点,我很抱歉,但我想推荐一种不同的方法:
我认为最好从服务器端应用程序返回原始数据,并将其绑定到客户端模板。这使得请求更加灵活,因为您只从服务器返回json。
对我来说,如果你所做的只是从服务器获取html并将其“原样”注入到DOM中,那么使用Angular似乎没有意义。
我了解Angular 1。x有一个html绑定,但我在Angular 2.0中还没有看到对应的绑定。不过他们以后可能会加进去。不管怎样,我还是会考虑为你的Angular 2.0应用提供一个数据api。
如果您感兴趣的话,这里有一些带有简单数据绑定的示例:http://www.syntaxsuccess.com/viewarticle/angular-2.0-examples
Angular 2+支持渲染HTML的[innerHTML]属性绑定。如果以其他方式使用插值,则它将被视为字符串。
转换成。html文件
<div [innerHTML]="theHtmlString"></div>
导入.ts文件
theHtmlString:String = "enter your html codes here";
请参考其他最新的答案。
这适用于我:<div innerHTML = "{{myVal}}"></div> (Angular2, Alpha 33)
根据另一个SO:用angular2将HTML从服务器插入到DOM中(angular2中的通用DOM操作),"inner-html"相当于Angular 1中的"ng-bind-html"。X
只是在目前为止所有精彩的回答中补充一点:如果你正在使用[innerHTML]来渲染Angular组件,并且对它不能像我一样工作感到沮丧,可以看看我写的ngx-dynamic-hooks库来解决这个问题。
有了它,您可以从动态字符串/html加载组件,而不会影响安全性。它实际上也像[innerHTML]一样使用Angular的DOMSanitizer,但保留了加载组件的能力(以一种安全的方式)。
在这部《斯塔克布利茨》中可以看到它的作用。