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

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

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


当前回答

你可以使用以下两种方法。

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

or

<div innerHTML="{{myVal}}"></div>

其他回答

你可以使用以下两种方法。

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

or

<div innerHTML="{{myVal}}"></div>

Angular 2+支持渲染HTML的[innerHTML]属性绑定。如果以其他方式使用插值,则它将被视为字符串。

转换成。html文件

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

导入.ts文件

theHtmlString:String = "enter your html codes here";

在angular2@2.0.0-alpha.44:

当使用{{插值}}时,html绑定将不起作用,请使用“表达式”来代替:

无效的

<p [innerHTML]="{{item.anleser}}"></p>

->抛出错误(插值而不是期望的表达式)

正确的

<p [innerHTML]="item.anleser"></p>

->这是正确的方式。

你可以在表达式中添加额外的元素,比如:

<p [innerHTML]="'<b>'+item.anleser+'</b>'"></p>

hint

使用[innerHTML]添加的HTML(或通过其他方式如element. appendchild()或类似方式动态添加的HTML)不会被Angular以任何方式处理,除非出于安全目的进行消毒。 只有当HTML被静态地添加到组件模板中时,这些事情才会起作用。如果你需要这个,你可以在运行时创建一个组件,就像在如何使用/创建动态模板来编译Angular 2.0的动态组件中解释的那样?

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

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

在Angular v2.1.1中工作

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