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

    } 
}