在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>

我们总是可以将html内容传递给innerHTML属性以呈现html动态内容，但动态html内容也可能被感染或恶意。因此，在将动态内容传递给innerHTML之前，我们应该始终确保内容是经过消毒的(使用DOMSanitizer)，这样我们就可以逃脱所有恶意内容。

试试下面的管子:

import { Pipe, PipeTransform } from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";

@Pipe({name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform {
    constructor(private sanitized: DomSanitizer) {
    }
    transform(value: string) {
        return this.sanitized.bypassSecurityTrustHtml(value);
    }
}

Usage:
<div [innerHTML]="content | safeHtml"></div>

如果我错过了重点，我很抱歉，但我想推荐一种不同的方法:

我认为最好从服务器端应用程序返回原始数据，并将其绑定到客户端模板。这使得请求更加灵活，因为您只从服务器返回json。

对我来说，如果你所做的只是从服务器获取html并将其“原样”注入到DOM中，那么使用Angular似乎没有意义。

我了解Angular 1。x有一个html绑定，但我在Angular 2.0中还没有看到对应的绑定。不过他们以后可能会加进去。不管怎样，我还是会考虑为你的Angular 2.0应用提供一个数据api。

如果您感兴趣的话，这里有一些带有简单数据绑定的示例:http://www.syntaxsuccess.com/viewarticle/angular-2.0-examples

Angular 2.0.0和Angular 4.0.0 final

对于安全的内容

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

DOMSanitizer

潜在的不安全HTML需要使用angular的DOM杀毒器显式地标记为受信任，这样就不会剥离潜在的不安全内容

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

用一根管子

@Pipe({name: 'safeHtml'})
export class Safe {
  constructor(private sanitizer:DomSanitizer){}

  transform(style) {
    return this.sanitizer.bypassSecurityTrustHtml(style);
    //return this.sanitizer.bypassSecurityTrustStyle(style);
    // return this.sanitizer.bypassSecurityTrustXxx(style); - see docs
  }
}

在RC.1中，有些样式不能使用绑定语法添加

文档:https://angular.io/api/platform-browser/DomSanitizer

安全警告

相信用户添加的HTML可能会带来安全风险。之前提到的文档状态:

调用任意一个bypassSecurityTrust…api禁用Angular内置的对传入值的处理功能。仔细检查和审计进入此调用的所有值和代码路径。确保任何用户数据都为此安全上下文进行了适当的转义。更多详细信息请参见《安全指南》。

角标记

类似的

class FooComponent {
  bar = 'bar';
  foo = `<div>{{bar}}</div>
    <my-comp></my-comp>
    <input [(ngModel)]="bar">`;

with

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

不会导致Angular在foo中处理任何特定于Angular的东西。 Angular在构建时用生成的代码替换Angular特定的标记。在运行时添加的标记不会被Angular处理。

要添加包含特定于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样式