正确的语法如下:

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

文档参考

Angular 2.0.0和Angular 4.0.0 final

对于安全内容

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

DOMSANITIZER

需要使用Angulars DOM sanitizer将潜在的不安全HTML显式标记为受信任，这样就不会剥离内容中潜在的不安全部分

<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">`;

与

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

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

要添加包含Angular特定标记（属性或值绑定，组件，指令，管道等）的HTML，需要在运行时添加动态模块并编译组件。 这个答案提供了更多的细节，我如何使用/create dynamic template用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样式