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

Bhushan Gadekar 发表于 Dev

布山·加德卡（Bhushan Gadekar）

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

  }
}

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

贡特·佐赫鲍尔（GünterZöchbauer）

有关最新示例，请参见带有用户单击所选组件的Angular 2动态选项卡

原版的

不能使用dynamicComponentLoader的constructor()了。移到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');

  }
}