angular2 仅从字符串生成组件

Question

请告诉如何在 Angular2/4 中执行以下操作：

组件SomeComponent从@Input获取以下html作为字符串：

  `<am-input
    [placeholder]="'Placeholder'"
    [disabled]="true">
  </am-input>`

SomeComponent 如何仅从该字符串在其内部创建一个组件？

谢谢

Answer 1

唯一的选择是使用JIT编译器，当你得到它时编译它。阅读Here is what you need to know about dynamic components in Angular，特别是Creating components on the fly 部分。它详细解释了该过程。这是要点：

class SomeComponent {
  @Input inputTpl;
  constructor(private _compiler: Compiler,
            private _injector: Injector,
            private _m: NgModuleRef<any>) {
  }

  ngOnChanges() {  
    const tmpCmp = Component({template: inputTpl})(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);
      })
    }