等效$编译(角2)

Question

等效$编译(角2)我想手动编译一些包含指令的HTML。什么是相当于$compile角度2？例如，在角1中，我可以动态编译HTML片段并将其附加到DOM中：var e = angular.element('<div directive></div>');element.append(e);$compile(e)($scope);

Answer 1

角形 2.3.0 (2016-12-07)

要获得所有详细信息，请检查：

• 如何使用/创建动态模板来编译具有角2.0的动态组件？

在行动中看到这一点：

• 观察

  工作柱塞

  (与2.3.0+一起工作)

校长：

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

快速概述如何创建组件

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;}

一种将组件注入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;}

如何创建ComponentFactory (并缓存它)

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

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

  // 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;
        //...
    });

包含所有细节的完整描述读这里，或观察工作实例