Angular,在运行时编译和创建组件

Question

我正在努力制作一个角度的文档生成工具,我正在挑战我如何允许用户动态创建内容.

我想要创建的组件可能有任意模型和行为,所以我认为我不能使用共享组件.

我正在描述的组件在编译时不存在.

我看到一些用于渲染动态组件的文档.然而它提到,你必须在列出的"动态"部分entryComponents中ngModule.这对我的方案不起作用.

是否有另一种机制来实现这种效果？

Answer 1

您可以即时创建模块和组件,对其应用装饰器,然后将其全部编译.然后,您将能够访问已编译的组件:

@ViewChild('vc', {read: ViewContainerRef}) vc: ViewContainerRef;

constructor(private _compiler: Compiler,
            private _injector: Injector,
            private _m: NgModuleRef<any>) {
}

ngAfterViewInit() {
  const template = '<span>generated on the fly: {{name}}</span>';

  const tmpCmp = Component({template: template})(class {
  });
  const tmpModule = NgModule({declarations: [tmpCmp]})(class {
  });

  this._compiler.compileModuleAndAllComponentsAsync(tmpModule)
    .then((factories) => {
      const f = factories.componentFactories[0];
      const cmpRef = f.create(this._injector, [], null, this._m);
      cmpRef.instance.name = 'dynamic';
      this.vc.insert(cmpRef.hostView);
    })
}

要使这种方法起作用,您需要将编译器带到运行时.有关动态组件的更多详细信息,请阅读文章:

• 以下是您需要了解的有关Angular中动态组件的信息