Angular HTML绑定

Question

Angular HTML绑定我正在编写一个Angular应用程序，我想要显示一个HTML响应。我怎么做？如果我只是使用绑定语法，{{myVal}}它会编码所有HTML字符（当然）。我需要以某种方式将a的内部html绑定div到变量值。

Answer 1

正确的语法如下：

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

适用于 7.2.13

文档参考

Answer 2

[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样式

Answer 3

在angular2@2.0.0-alpha.44上：

使用时，Html-Binding不起作用{{interpolation}}，改为使用“Expression”：

无效

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

- >抛出错误（插值而不是预期的表达式）

正确

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

- >这是正确的方法。

您可以在表达式中添加其他元素，例如：

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

暗示

除了用于安全目的的清理之外，Angular不会以任何方式处理使用[innerHTML]（或通过其他类似element.appenChild()或类似的方式动态添加）添加的HTML 。
只有将HTML静态添加到组件模板时，此类操作才有效。如果需要，可以在运行时创建一个组件，如我如何使用/创建动态模板以使用Angular 2.0编译动态组件中所述？