2角吴相当于绑定，HTML，$ sce.trustAsHTML（）和$编译？ [英] Angular 2 equivalent of ng-bind-html, $sce.trustAsHTML(), and $compile?

问题描述

在角1.x中，我们可以通过使用HTML标记 NG-绑定-HTML ，结合JavaScript调用<$ C $插入实时HTML C> $ sce.trustAsHTML（）。这让我们有个办法80％，但是当角标签被使用，比如如果你插入的HTML中使用 NG-重复或定制指令是行不通的。

In Angular 1.x, we could insert HTML in real-time by using the HTML tag ng-bind-html, combined with the JavaScript call $sce.trustAsHTML(). This got us 80% of th way there, but wouldn't work when Angular tags were used, such as if you inserted HTML that used ng-repeat or custom directives.

要得到那个工作，我们可以使用名为$编译自定义指令

To get that to work, we could use a custom directive that called $compile.

什么是2角相当于所有的呢？我们可以结合使用 [内的html] ，但这只适用于非常简单的HTML标记，如＆LT; B＆GT; 。它不改变自定义角2指令到正常的HTML元素。 （就像没有 $编译步角的1.x）什么是 $编译为2角相当于？

What is the equivalent for all of this in Angular 2? We can bind using [inner-html] but this only works for very simple HTML tags such as <b>. It doesn't transform custom angular 2 directives into functioning HTML elements. (Much like Angular 1.x without the $compile step.) What is the equivalent of $compile for Angular 2?

推荐答案

在Angular2你应该使用<一个href=\"https://angular.io/docs/js/latest/api/core/DynamicComponentLoader-class.html\">DynamicComponentLoader要在页面上插入一些编制内容。因此，举例来说，如果你想编译下一HTML：

In Angular2 you should use DynamicComponentLoader to insert some "compiled content" on the page. So for example if you want to compile next html:

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

，那么你需要使用这个网站作为模板来创建组件（姑且称之为 CompiledComponent ），并使用 DynamicComponentLoader 在页面上插入该组件。

then you need to create component with this html as a template (let's call it CompiledComponent) and use DynamicComponentLoader to insert this component on the page.

@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');
  }
}

查看这plunker

UPD 您可以创建动态组件右侧前<$ ​​C $ C> loader.loadIntoLocation（）电话：

UPD You can create component dynamically right before the loader.loadIntoLocation() call:

// ... 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, elementRef, 'container');
  }
}

我个人不喜欢它，它看起来像一个肮脏的黑客我。但这里是的plunker

PS 要注意的是在这一刻angular2正在积极发展。这样的情况可以在任何时候被改变。

PS Beware that at this moment angular2 is under active development. So situation can be changed at any time.

这篇关于2角吴相当于绑定，HTML，$ sce.trustAsHTML（）和$编译？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！