等效于 Angular 2 中的 $compile [英] Equivalent of $compile in Angular 2

问题描述

我想手动编译一些包含指令的 HTML.Angular 2 中 $compile 的等价物是什么?

例如，在 Angular 1 中，我可以动态编译 HTML 片段并将其附加到 DOM:

var e = angular.element('
');element.append(e);$compile(e)($scope);

解决方案

Angular 2.3.0 (2016-12-07)

要查看所有详细信息:

• 如何使用/创建动态模板来使用 Angular 2.0 编译动态组件?

要看到它的实际效果:

• 观察一个工作的plunker(使用2.3.0+)

校长:

1) 创建模板
2) 创建组件
3) 创建模块
4) 编译模块
5)创建(和缓存)ComponentFactory
6) 使用 Target 创建它的实例

快速概览如何创建组件

createNewComponent (tmpl:string) {@成分({选择器:'动态组件'，模板:tmpl，})类 CustomDynamicComponent 实现 IHaveDynamicData {@Input() 公共实体:任何；};//此特定模板的组件返回自定义动态组件；}

如何将组件注入到 NgModule 中

createComponentModule (componentType: any) {@NgModule({进口:[PartsModule,//有 'text-editor', 'string-editor'...],声明: [组件类型],})类 RuntimeComponentModule{}//仅用于此类型的模块返回运行时组件模块；}

如何创建ComponentFactory (并缓存它)

的代码片段

public createComponentFactory(template: string): Promise{让工厂 = this._cacheOfFactories[模板];如果(工厂){console.log("Module 和 Type 从缓存中返回")返回新的承诺((解决)=> {解决(工厂)；});}//未知模板...让我们为它创建一个类型让 type = this.createNewComponent(template);let module = this.createComponentModule(type);返回新的承诺((解决)=> {this.compiler.compileModuleAndAllComponentsAsync(module).then((moduleWithFactories) =>{factory = _.find(moduleWithFactories.componentFactories, { 组件类型:类型 });this._cacheOfFactories[模板] = 工厂；解决(工厂)；});});}

如何使用上述结果的代码片段

//这里我们得到 Factory(刚刚编译或从缓存中)this.typeBuilder.createComponentFactory(模板).then((工厂:ComponentFactory) =>{//目标将实例化并注入组件(我们将保持对它的引用)this.componentRef = this.dynamicComponentTarget.createComponent(工厂);//让我们将@Inputs 注入到组件实例中让组件 = this.componentRef.instance;component.entity = this.entity;//...});

包含所有细节的完整描述阅读此处，或查看工作示例

.

.

<块引用>

过时 - Angular 2.0 RC5 相关(仅限 RC5)

要查看以前 RC 版本的以前的解决方案，请搜索这篇文章的历史

I want to manually compile some HTML containing directives. What is the equivalent of $compile in Angular 2?

For example, in Angular 1, I could dynamically compile a fragment of HTML and append it to the DOM:

var e = angular.element('<div directive></div>');
element.append(e);
$compile(e)($scope);

解决方案

Angular 2.3.0 (2016-12-07)

To get all the details check:

• How can I use/create dynamic template to compile dynamic Component with Angular 2.0?

To see that in action:

• observe a working plunker (working with 2.3.0+)

The principals:

1) Create Template
2) Create Component
3) Create Module
4) Compile Module
5) Create (and cache) ComponentFactory
6) use Target to create an Instance of it

A quick overview how to create a Component

createNewComponent (tmpl:string) {
  @Component({
      selector: 'dynamic-component',
      template: tmpl,
  })
  class CustomDynamicComponent  implements IHaveDynamicData {
      @Input()  public entity: any;
  };
  // a component for this particular template
  return CustomDynamicComponent;
}

A way how to inject component into NgModule

createComponentModule (componentType: any) {
  @NgModule({
    imports: [
      PartsModule, // there are 'text-editor', 'string-editor'...
    ],
    declarations: [
      componentType
    ],
  })
  class RuntimeComponentModule
  {
  }
  // a module for just this Type
  return RuntimeComponentModule;
}

A code snippet how to create a ComponentFactory (and cache it)

public createComponentFactory(template: string)
    : Promise<ComponentFactory<IHaveDynamicData>> {    
    let factory = this._cacheOfFactories[template];

    if (factory) {
        console.log("Module and Type are returned from cache")

        return new Promise((resolve) => {
            resolve(factory);
        });
    }

    // unknown template ... let's create a Type for it
    let type   = this.createNewComponent(template);
    let module = this.createComponentModule(type);

    return new Promise((resolve) => {
        this.compiler
            .compileModuleAndAllComponentsAsync(module)
            .then((moduleWithFactories) =>
            {
                factory = _.find(moduleWithFactories.componentFactories
                                , { componentType: type });

                this._cacheOfFactories[template] = factory;

                resolve(factory);
            });
    });
}

A code snippet how to use the above result

  // here we get Factory (just compiled or from cache)
  this.typeBuilder
      .createComponentFactory(template)
      .then((factory: ComponentFactory<IHaveDynamicData>) =>
    {
        // Target will instantiate and inject component (we'll keep reference to it)
        this.componentRef = this
            .dynamicComponentTarget
            .createComponent(factory);

        // let's inject @Inputs to component instance
        let component = this.componentRef.instance;

        component.entity = this.entity;
        //...
    });

The full description with all the details read here, or observe working example

.

.

OBSOLETE - Angular 2.0 RC5 related (RC5 only)

to see previous solutions for previous RC versions, please, search through the history of this post

这篇关于等效于 Angular 2 中的 $compile的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！