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

Question

我使用 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');

  }
}

这里有什么问题吗？ 提前致谢。

Answer 1

有关最新示例，请参阅Angular 2 dynamic tabs with user-click chosen components

原创

您不能再在constructor() 中使用dynamicComponentLoader。移至ngOnInit()

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');

  }
}