innerhtml – Angular 2相当于ng-bind-html,$sce.trustAsHTML()和$compile？

<div>
    <p>Common HTML tag</p>
    <angular2-component>Some angular2 component</angular2-component>
</div>

那么您需要使用此html作为模板创建组件(让我们称之为CompiledComponent),并使用DynamicComponentLoader在页面上插入此组件.

@Component({
  SELEctor: 'compiled-component'
})
@View({
  directives: [Angular2Component],template: `
    <div>
      <p>Common HTML tag</p>
      <angular2-component>Angular 2 component</angular2-component>
    </div>
  `
})
class CompiledComponent {
}

@Component({
  SELEctor: 'app'
})
@View({
  template: `
    <h2>Before container</h2>
    <div #container></div>
    <h2>After conainer</h2>
  `
})
class App {
  constructor(loader: DynamicComponentLoader,elementRef: ElementRef) {
    loader.loadIntoLOCATIOn(CompiledComponent,elementRef,'container');
  }
}

退房this plunker

UPD您可以在loader.loadIntoLOCATIOn()调用之前动态创建组件：

// ... Annotations
class App {
  constructor(loader: DynamicComponentLoader,elementRef: ElementRef) {
    // template generation
    const generatedTemplate = `<b>${Math.random()}</b>`;

    @Component({ SELEctor: 'compiled-component' })
    @View({ template: generatedTemplate })
    class CompiledComponent {};

    loader.loadIntoLOCATIOn(CompiledComponent,'container');
  }
}

我个人不喜欢它,它看起来像一个肮脏的黑客给我.但这里是the plunker

PS请注意,此刻,角度2正在积极发展.所以情况可以随时改变.