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

    } 
}