[解決済み] Angular 2の$compileに相当するもの

質問

ディレクティブを含む HTML を手動でコンパイルしたいです。 に相当するものは何ですか？ $compile に相当するものは何ですか？

例えば、Angular 1では、HTMLの断片を動的にコンパイルして、DOMに追加することができました。

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

どのように解決するのですか？

角型 2.3.0 (2016-12-07)

すべての詳細を取得するには、確認してください。

• Angular 2.0でダイナミックコンポーネントをコンパイルするために、ダイナミックテンプレートを使用/作成するにはどうすればよいですか？

実際に見るには

• 見る 動作中のプランカー (2.3.0+ で動作している)

プリンシパルです。

1) テンプレートの作成

2) コンポーネントの作成

3)モジュールの作成

4)モジュールのコンパイル

5) ComponentFactoryの作成(およびキャッシュ)

6) Targetを使用してInstanceを作成します。

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

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

すべての詳細が記述された完全な説明文 ここを読む または観察する 動作例

.

.

OBSOLETE - Angular 2.0 RC5関連 (RC5のみ)

以前の RC バージョンに対する以前の解決策を参照するには、以下を検索してください。 この投稿の履歴