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

在Angular 1.x中,我们可以使用 HTML标签ng-bind-html,结合 JavaScript调用$sce.trustAsHTML()实时地插入HTML.这使我们有80％的方式,但是在使用角度标签时不会工作,例如,如果您插入使用了ng重复或自定义指令的HTML.

要做到这一点,我们可以使用custom directive that called $compile.

在角度2中所有这一切的等价物是什么？我们可以使用[inner-html]绑定,但这只适用于非常简单的HTML标签,例如< b>.它不会将自定义角度2指令转换为正常运行的HTML元素. (很像Angular 1.x,没有$编译步骤).对于Angular 2,$compile的等价物是什么？

解决方法

在Angular2中,您应该使用 DynamicComponentLoader在页面上插入一些“编译内容”.所以例如如果你想编译下一个html：

<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正在积极发展.所以情况可以随时改变.