是否有可能在角度2中手動實例化組件

Question

在angular 2中，是否可以手動實例化組件A，然後將它傳遞並呈現在組件B的模板中？

Answer 1

是的，這是支持的。您需要一個ViewComponentRef，例如可以通過將其注入到構造函數中或使用@ViewChild('targetname')查詢和ComponentResolver來獲取，該ComponentResolver也可以注入。

從https://stackoverflow.com/a/36325468/217408此代碼示例例如允許與*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(); 
    }  
    } 
}