我正在写一个Angular应用程序,我有一个HTML响应,我想显示。
我怎么做呢?如果我简单地使用绑定语法{{myVal}},它将编码所有HTML字符(当然)。
我需要以某种方式将一个div的innerHTML绑定到变量值。
我正在写一个Angular应用程序,我有一个HTML响应,我想显示。
我怎么做呢?如果我简单地使用绑定语法{{myVal}},它将编码所有HTML字符(当然)。
我需要以某种方式将一个div的innerHTML绑定到变量值。
当前回答
在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的动态组件中解释的那样?
其他回答
在Angular v2.1.1中工作
<div [innerHTML]="variable or htmlString">
</div>
正确的语法如下:
<div [innerHTML]="theHtmlString"></div>
文档参考
你也可以使用DOM属性绑定将angular组件的类属性与模板绑定。
例如:<div [innerHTML]="theHtmlString"></div>
使用规范形式如下:
<div bind-innerHTML="theHtmlString"></div>
Angular文档:https://angular.io/guide/template-syntax#property-binding-property
参见工作stackblitz示例
在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的动态组件中解释的那样?
[innerHtml]在大多数情况下是一个很好的选择,但当你需要在html中硬编码样式时,它会失败。
我想分享其他方法:
你所需要做的就是在你的html文件中创建一个div,并给它一个id:
<div #dataContainer></div>
然后,在你的Angular 2组件中,创建对这个对象的引用(这里是TypeScript):
import { Component, ViewChild, ElementRef } from '@angular/core';
@Component({
templateUrl: "some html file"
})
export class MainPageComponent {
@ViewChild('dataContainer') dataContainer: ElementRef;
loadData(data) {
this.dataContainer.nativeElement.innerHTML = data;
}
}
然后简单地使用loadData函数将一些文本附加到html元素。
这只是一种使用原生javascript的方式,但在Angular环境中。我不推荐这样做,因为这会使代码更加混乱,但有时也没有其他选择。
另见Angular 2 - innerHTML样式