angular2 RC5中dynamicComponentLoader的替代方法？

Question

我在RC5中創建一個angular2應用程序，我想在其中動態加載組件。

在RC1

，我做了同樣的使用dynamicComponentLoader爲：

@Component({ 
    moduleId: module.id, 
    selector: 'generic-component', 
    templateUrl: 'generic.component.html', 
    styleUrls: ['generic.component.css'] 
}) 
export class GenericComponent implements OnInit { 
    @ViewChild('target',{read:ViewContainerRef}) target; 
    @Input('component-name') componentName:string; 
    @Input('component-info') componentInfo:string; 
    @Input('component-model') componentModel:Object; 

    keysRegister:string[]=[  
    'users', 
    'employee' 
    ]; 
    componentNames:string[]=[  
    'UserComponent', 
    'EmpComponent' 
    ]; 

    constructor(private dcl:DynamicComponentLoader) {} 

    ngOnInit() { 
    } 

    ngAfterViewInit(){ 
     let componentIndex=this.keysRegister.indexOf(this.componentName); 
     this.dcl.loadNextToLocation(StandardLib[this.componentNames[componentIndex]],this.target) 
    .then(ref=>{ 
     ref.instance.componentModel=this.componentModel; 
    }); 
    console.log("GenericComponent...... "+this.componentName+" Loaded"); 

    } 

} 

，每當我要加載的分量，我會做：

<div *ngIf="columnModel" style="border:1px solid orange"> 
    <generic-component 
     [component-name]="columnModel.componentName" <!-- I will pass *users* here --> 
     [component-model]="columnModel.componentModel" 
     [component-info]="columnModel.componentInfo" 
    ></generic-component> 
</div> 

我嘗試使用componentResolver但我不能讓它正常工作。 任何輸入？ 謝謝。

Answer 1

在RC5中，您需要使用Compiler中的compileComponentAsync()方法。

下面是一個簡單的例子：

constructor(private _comp: Compiler) {} 

ngAfterViewInit(): void { 
    this._comp.compileComponentAsync(this.componentModel).then(a => this.target.createComponent(a)); 
} 

這裏是從礦山庫的完整例子：

https://github.com/flauc/ng2-simple-components/blob/master/src/modal/modal.component.ts