在Angular 2中，你可以做3种类型的绑定:

[property]="expression" ->任何html属性都可以链接到 表达式。在这种情况下，如果表达式更改属性将更新， 但反过来就行不通了。 (event)="expression" ->当事件激活时执行表达式。 [(ngModel)]="property" ->将属性从js(或ts)绑定到html。在此属性上的任何更新都将随处可见。

表达式可以是值、属性或方法。例如:'4'，'controller。var, getValue ()

例子

在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 2或Angular 4中使用它，同时还想保持内联CSS，那么你可以使用它

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

您可以使用几种方法来实现该解决方案。正如已经批准的答案中所说，你可以使用:

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

根据你想要实现的目标，你也可以尝试其他东西，比如javascript DOM(不推荐，DOM操作很慢):

演讲

<div id="test"></test>

组件

var p = document.getElementsById("test");
p.outerHTML = myVal;

属性绑定

Javascript DOM外部HTML

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

在Angular 2中，你可以做3种类型的绑定:

[property]="expression" ->任何html属性都可以链接到 表达式。在这种情况下，如果表达式更改属性将更新， 但反过来就行不通了。 (event)="expression" ->当事件激活时执行表达式。 [(ngModel)]="property" ->将属性从js(或ts)绑定到html。在此属性上的任何更新都将随处可见。

表达式可以是值、属性或方法。例如:'4'，'controller。var, getValue ()

例子