在angular2中使用动态组件加载程序？

我使用typeScript，使用angular2的dynamicComponentloader创建了以下应用程序。 但我的子组件未被渲染。

我的组成部分：

import {Component, Directive, ElementRef, Renderer,DynamicComponentLoader} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {DynamicBody1Component} from './ICICI-DYNAMIC-BODY-1.component';

@Directive({
  selector: '[x-large]'
})
export class XLarge {
  constructor(element: ElementRef, renderer: Renderer) {
    // we must interact with the dom through Renderer for webworker/server to see the changes
    renderer.setElementStyle(element.nativeElement, 'fontSize', 'x-large');
  }
}


@Component({
  selector: 'app',
  directives: [
    ...ROUTER_DIRECTIVES,
    XLarge
  ],
  styles: [`
    .router-link-active {
      background-color: lightgray;
     }`
    ],
  template: `
    <div>    
        <div>
            <span x-large>Hello, {{ name }}!</span>
        </div>
        <div>
            <div #container></div>
        </div>
      </div>
      `
 })
export class App {
  name: string = 'Angular 2';
  public dynamicComponentLoader: DynamicComponentLoader;  
  constructor(dynamicComponentLoader: DynamicComponentLoader, private     elementRef: ElementRef) {}

  ngOnInit() {
    this.dynamicComponentLoader.loadIntoLocation(DynamicBody1Component, this.elementRef, 'container');

  }
}

从'angular2/core'导入{Component，Directive，ElementRef，Renderer，DynamicComponentLoader}；
从“angular2/ROUTER”导入{RouteConfig，ROUTER_指令}；
从“./ICICI-DYNAMIC-BODY-1.component”导入{dynamicbodycomponent}；
@指示({
选择器：“[x-large]”
})
出口类别XLarge{
构造函数（元素：ElementRef，呈现器：呈现器）{
//我们必须通过渲染器与dom交互，以便webworker/server查看更改
renderer.setElementStyle（element.nativeElement，'fontSize'，'x-large'）；
}
}
@组成部分({
选择器：“应用程序”，
指令：[
…路由器指令，
XLarge
],
风格：[`
.路由器链路处于活动状态{
背景颜色：浅灰色；
}`
],
模板：`
你好，{{name}}！
`
})
导出类应用程序{
名称：字符串='Angular 2'；
公共dynamicComponentLoader：dynamicComponentLoader；
构造函数（dynamicComponentLoader:dynamicComponentLoader，私有elementRef:elementRef）{}
恩戈尼尼特（）{
this.dynamicComponentLoader.loadIntoLocation（dynamicBodyComponent，this.elementRef，'container'）；
}
}

这里有什么问题吗？

---

提前感谢。

有关最新示例，请参阅

原创

您不能再在

constructor（）

中使用

dynamicComponentLoader

。将其移动到

ngOnInit（）

从'angular2/core'导入{Component，Directive，ElementRef，Renderer，DynamicComponentLoader}；
从“angular2/ROUTER”导入{RouteConfig，ROUTER_指令}；
从“./DYNAMIC-BODY-1.component”导入{dynamicbodycomponent}；
@指示({
选择器：“[x-large]”
主持人:{
“[style.fontSize]”：“x-large”，
}
})
出口类别XLarge{
}
@组成部分({
选择器：“应用程序”，
指令：[
…路由器指令，
XLarge
],
风格：[`
.路由器链路处于活动状态{
背景颜色：浅灰色；
}
`],
模板：`
你好，{{name}}！
`
})
导出类应用程序{
名称：字符串='Angular 2'；
构造函数（专用dynamicComponentLoader:dynamicComponentLoader，专用elementRef:elementRef）{}
恩戈尼尼特（）{
this.dynamicComponentLoader.loadIntoLocation（dynamicBodyComponent，this.elementRef，'container'）；
}
}

我尝试了您的解决方案，现在我遇到了这个错误<代码>异常：TypeError:无法读取[null]中未定义的属性“loadIntoLocation”.原始异常：TypeError:无法读取未定义的属性“loadIntoLocation”…请参阅问题中的更新代码抱歉，忘记在构造函数之前删除

应用程序中的一行。@gunter.it仍然不工作。有关详细信息，请参阅快照。我正在使用UniversalStarter进行服务器端渲染。未显示错误。但我的组件也未加载到浏览器中。但您没有收到错误吗？我还更改了
XLarge
。对此，您不需要
ElementRef
。但这并不能解决问题。@guner如果您可以参考快照，您可以看到控制台中没有给出错误，但组件没有被加载。
import {Component, Directive, ElementRef, Renderer,DynamicComponentLoader} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {DynamicBody1Component} from './DYNAMIC-BODY-1.component';

@Directive({
  selector: '[x-large]'
  host: {
    '[style.fontSize]': 'x-large',
  }
})
export class XLarge {
}


@Component({
  selector: 'app',
  directives: [
    ...ROUTER_DIRECTIVES,
    XLarge
  ],
  styles: [`
    .router-link-active {
      background-color: lightgray;
    }
  `],
  template: `
  <div>    
    <div>
      <span x-large>Hello, {{ name }}!</span>
    </div>
    <div>
        <div #container></div>
    </div>
  </div>
  `
})
export class App {
  name: string = 'Angular 2';
  constructor(private dynamicComponentLoader: DynamicComponentLoader, private elementRef: ElementRef) {}

  ngOnInit() {
    this.dynamicComponentLoader.loadIntoLocation(DynamicBody1Component, this.elementRef, 'container');

  }
}