正确的语法如下:

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

文档参考

请参考其他最新的答案。

这适用于我:<div innerHTML = "{{myVal}}"></div> (Angular2, Alpha 33)

根据另一个SO:用angular2将HTML从服务器插入到DOM中(angular2中的通用DOM操作)，"inner-html"相当于Angular 1中的"ng-bind-html"。X

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

如果[innerHTML]包含用户创建的内容，直接使用[innerHTML]而不使用Angular的DOM消毒器是不可取的。@GünterZöchbauer在他的回答中建议的safeHtml管道是一种净化内容的方法。下面的指令是另一个指令:

import { Directive, ElementRef, Input, OnChanges, Sanitizer, SecurityContext,
  SimpleChanges } from '@angular/core';

// Sets the element's innerHTML to a sanitized version of [safeHtml]
@Directive({ selector: '[safeHtml]' })
export class HtmlDirective implements OnChanges {
  @Input() safeHtml: string;

  constructor(private elementRef: ElementRef, private sanitizer: Sanitizer) {}

  ngOnChanges(changes: SimpleChanges): any {
    if ('safeHtml' in changes) {
      this.elementRef.nativeElement.innerHTML =
        this.sanitizer.sanitize(SecurityContext.HTML, this.safeHtml);
    }
  }
}

被使用

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

如果你想在Angular 2或Angular 4中使用它，同时还想保持内联CSS，那么你可以使用它

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