只是在目前为止所有精彩的回答中补充一点:如果你正在使用[innerHTML]来渲染Angular组件，并且对它不能像我一样工作感到沮丧，可以看看我写的ngx-dynamic-hooks库来解决这个问题。

有了它，您可以从动态字符串/html加载组件，而不会影响安全性。它实际上也像[innerHTML]一样使用Angular的DOMSanitizer，但保留了加载组件的能力(以一种安全的方式)。

在这部《斯塔克布利茨》中可以看到它的作用。

如果[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>

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

我认为最好从服务器端应用程序返回原始数据，并将其绑定到客户端模板。这使得请求更加灵活，因为您只从服务器返回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中，你可以做3种类型的绑定:

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

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

例子

动态添加元素到DOM的方法，正如在Angular 2文档中解释的那样，是使用@Angular/core中的ViewContainerRef类。

你要做的是声明一个指令，它将实现ViewContainerRef，并充当DOM上的占位符。

指令

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appInject]'
})
export class InjectDirective {

  constructor(public viewContainerRef: ViewContainerRef) { }

}

然后，在你想要注入组件的模板中:

HTML

<div class="where_you_want_to_inject">    
  <ng-template appInject></ng-template>
</div>

然后，从注入的组件代码中，注入包含你想要的HTML的组件:

import { Component, OnInit, ViewChild, ComponentFactoryResolver } from '@angular/core';
import { InjectDirective } from '../inject.directive';
import { InjectedComponent } from '../injected/injected.component';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {

  @ViewChild(InjectDirective) injectComp: InjectDirective;

  constructor(private _componentFactoryResolver: ComponentFactoryResolver) {
  }

  ngOnInit() {
  }

  public addComp() {
    const componentFactory = this._componentFactoryResolver.resolveComponentFactory(InjectedComponent);
    const viewContainerRef = this.injectComp.viewContainerRef;
    const componentRef = viewContainerRef.createComponent(componentFactory);
  }

  public removeComp() {
    const componentFactory = this._componentFactoryResolver.resolveComponentFactory(InjectedComponent);
    const viewContainerRef = this.injectComp.viewContainerRef;
    const componentRef = viewContainerRef.remove();
  }

}

我在Angular 2上添加了一个完全可用的演示应用，动态地将组件添加到DOM演示中

<div [innerHTML]=“HtmlPrint”></div><br>

innerHtml是HTML-Elements的一个属性，它允许你以编程的方式设置它的html-content。还有一个innerText属性，它将内容定义为纯文本。

属性周围的[attributeName]="value"方括号定义了一个Angular输入绑定。这意味着，属性的值(在您的例子中是innerHtml)绑定到给定的表达式，当表达式结果改变时，属性值也会改变。

所以基本上[innerHtml]允许你绑定和动态改变给定html元素的html内容。