È possibile istanziare manualmente il componente in angolare 2

Question

Nell'angolo 2, è possibile creare manualmente un'istanza di un componente A, quindi passarlo e renderlo nel modello del componente B?

Answer 1

Sì, è supportato. È necessario un ViewComponentRef che può essere acquisito ad esempio immettendolo nel costruttore o utilizzando una query @ViewChild('targetname') e un ComponentResolver che può anche essere iniettato.

Questo esempio di codice da https://stackoverflow.com/a/36325468/217408 permette ad esempio di aggiungere componenti in modo dinamico con *ngFor

@Component({ 
    selector: 'dcl-wrapper', 
    template: `<div #target></div>` 
}) 
export class DclWrapper { 
    @ViewChild('target', {read: ViewContainerRef}) target; 
    @Input() type; 
    cmpRef:ComponentRef; 
    private isViewInitialized:boolean = false; 

    constructor(private resolver: ComponentResolver) {} 

    updateComponent() { 
    if(!this.isViewInitialized) { 
     return; 
    } 
    if(this.cmpRef) { 
     this.cmpRef.destroy(); 
    } 
    this.resolver.resolveComponent(this.type).then((factory:ComponentFactory<any>) => { 
     this.cmpRef = this.target.createComponent(factory) 
    }); 
    } 

    ngOnChanges() { 
    this.updateComponent(); 
    } 

    ngAfterViewInit() { 
    this.isViewInitialized = true; 
    this.updateComponent(); 
    } 

    ngOnDestroy() { 
    if(this.cmpRef) { 
     this.cmpRef.destroy(); 
    }  
    } 
}