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

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

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

例子

你可以使用以下两种方法。

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

or

<div innerHTML="{{myVal}}"></div>

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

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

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

例子

只需简单地使用[innerHTML]属性在你的HTML，如下所示:

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

你的组件中是否有包含html标记或 需要在模板中显示的实体?传统的 插值不会工作，但是innerHTML属性绑定会 救援。

使用{{myVal}}不能正常工作!这不会拾取HTML标签，如<p>， <strong>等，只将其作为字符串传递…

假设你的组件中有这样的代码:

碰到弦!弦!弦!< /埃隆·马斯克>”

如果你使用{{myVal}}，你会在视图中得到这个:

<strong>Stackoverflow</strong> is <em>helpful!</em>

但是使用[innerHTML]="myVal"使结果像预期的那样:

Stackoverflow很有用!

动态添加元素到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演示中

在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的动态组件中解释的那样?