Angular 2中的动态模板URL

尽管可能不是最优雅的解决方案，但我使用DynamicComponentLoader和ElementRef将模板值动态分配给组件。实际上，我在寻找一种可以在占位符中添加多个自定义组件的解决方案。

我尝试了shmck概述的函数中的服务注入，由于调用模板函数时服务尚不可用，因此无法使用。确实，

this

简而言之：

一个简单的组件作为要使用的模板

@Component({  selector: 'dt2-simple-block',  properties: ["idx"],  template: `<h1>Simple block for  {{ idx }} </h1>`,  directives: []})class dt2SimpleBlock {  constructor() {  }}

包含所有要添加的组件的Component的构造方法（我的应用程序要求包含多个子元素：

 constructor(loader: DynamicComponentLoader, elementRef: ElementRef) {  //iterate  for (var i = 0; i < toSomething; i++) {      // build the template      var blockdirective = 'dt2-simple-block'      var template = '<' + blockdirective +' idx="' + this.userBlocks.userHomePanelBlocks[i] +          '"></' + blockdirective + '>';      console.log(template);   // debugging purpose      var directives = [dt2SimpleBlock];        loader.loadNextToLocation(toComponent(template, directives), elementRef);    }

并将辅助功能作为util放置在某处

function toComponent(template, directives = []) {  @Component({ selector: 'fake-component' })  @View({ template, directives })  class FakeComponent { }  return FakeComponent;}