在创建由代码的组件实例时，如何设置dynmaterl

Question

我正在考虑在Angular中创建小组件，该组件将在AngularJs中执行<ng-include>的作用。

首先，我必须给组件一个模板或模板以进行编译？如果我只在运行时间里知道这是什么？

@Component({
  selector: 'my-template',
  // templateUrl: '',    //won't render, must give it something?
})
export class MyTemplate {
 @Input() templateURL: string;
  constructor() {
    console.log("template component was created!");
  }
}

我想在代码中创建该组件的实例并给出其模板。这样的东西：

 var factory = this.resolver.resolveComponentFactory(MyTemplate);
factory.templateUrl =    // Is that possible?

可以以某种方式完成吗？TemplateUrl是@input在代码中，我如何创建组件实例并给予其输入？

Answer 1

我认为您应该使用动态组件加载来做到这一点。

我们可能会创建 htmloutlet 指令，该指令将使用所需的 TemplateUrl 创建组件Dynamically：

@Directive({
  selector: 'html-outlet' 
})
export class HtmlOutlet {
  @Input() html: string;
  constructor(private vcRef: ViewContainerRef, private compiler: Compiler) {}
  ngOnChanges() {
    const html = this.html;
    if (!html) return;
    @Component({
      selector: 'dynamic-comp',
      templateUrl: html
    })
    class DynamicHtmlComponent  { };
    @NgModule({
      imports: [CommonModule],
      declarations: [DynamicHtmlComponent]
    })
    class DynamicHtmlModule {}
    this.compiler.compileModuleAndAllComponentsAsync(DynamicHtmlModule)
      .then(factory => {
        const compFactory = factory.componentFactories
               .find(x => x.componentType === DynamicHtmlComponent);
        const cmpRef = this.vcRef.createComponent(compFactory, 0);
        cmpRef.instance.prop = 'test';
        cmpRef.instance.outputChange.subscribe(()=>...);
    });
  }
}

然后使用它：

<html-outlet [html]="article?.html">

其中 html 是 Article.html