Alternative für dynamicComponentLoader in angular2 RC5?

Question

Ich erstelle eine angular2 App in RC5, in der ich Komponenten dynamisch laden möchte.

in RC1, ich habe diese verwendet dynamicComponentLoader wie:

@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"); 

    } 

} 

und wann immer ich die Komponente geladen werden soll ich tun würde:

<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> 

Ich versuchte componentResolver verwenden, aber ich bin nicht in der Lage Lass es richtig funktionieren. Beliebige Eingänge? Danke.

Answer 1

In RC5 müssen Sie die compileComponentAsync() Methode aus dem Compiler verwenden.

Hier ist ein kurzes Beispiel:

constructor(private _comp: Compiler) {} 

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

Und hier ist ein komplettes Beispiel aus einer Bibliothek von Minen:

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