Angular HTML绑定

Question

Angular HTML绑定

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

我怎么做？如果我只是使用绑定语法，{{myVal}}它会编码所有HTML字符（当然）。

我需要以某种方式将a的内部html绑定div到变量值。

Answer 1

正确的语法如下：<div&nbsp;[innerHTML]="theHtmlString"></div>适用于&nbsp;7.2.13文档参考

Answer 2

[innerHtml]&nbsp;在大多数情况下是很好的选择，但是它会因为非常大的字符串或者在html中需要硬编码样式而失败。我想分享其他方法：你需要做的就是在你的html文件中创建一个div并给它一些id：<div&nbsp;#dataContainer></div>然后，在Angular 2组件中，创建对此对象的引用（此处为TypeScript）：import&nbsp;{&nbsp;Component,&nbsp;ViewChild,&nbsp;ElementRef&nbsp;}&nbsp;from&nbsp;'@angular/core';@Component({ &nbsp;&nbsp;&nbsp;&nbsp;templateUrl:&nbsp;"some&nbsp;html&nbsp;file"})export&nbsp;class&nbsp;MainPageComponent&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;@ViewChild('dataContainer')&nbsp;dataContainer:&nbsp;ElementRef; &nbsp;&nbsp;&nbsp;&nbsp;loadData(data)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.dataContainer.nativeElement.innerHTML&nbsp;=&nbsp;data; &nbsp;&nbsp;&nbsp;&nbsp;}}然后只需使用loadData函数将一些文本附加到html元素。这只是一种使用原生javascript的方式，但在Angular环境中。我不推荐它，因为使代码更麻烦，但有时没有其他选择。另请参见Angular 2 - innerHTML样式

Answer 3

在angular2@2.0.0-alpha.44上：使用时，Html-Binding不起作用{{interpolation}}，改为使用“Expression”：无效<p&nbsp;[innerHTML]="{{item.anleser}}"></p>- >抛出错误（插值而不是预期的表达式）正确<p&nbsp;[innerHTML]="item.anleser"></p>- >这是正确的方法。您可以在表达式中添加其他元素，例如：<p&nbsp;[innerHTML]="'<b>'+item.anleser+'</b>'"></p>暗示除了用于安全目的的清理之外，Angular不会以任何方式处理使用[innerHTML]（或通过其他类似element.appenChild()或类似的方式动态添加）添加的HTML&nbsp;。只有将HTML静态添加到组件模板时，此类操作才有效。如果需要，可以在运行时创建一个组件，如我如何使用/创建动态模板以使用Angular 2.0编译动态组件中所述？