Passaggio dell'input durante la creazione dinamica del componente Angular 2 mediante ComponentResolver

Question

Sono in grado di caricare un componente Angular 2 dinamico utilizzando ComponentResolver e ViewContainerRef.

Tuttavia, non sono in grado di capire come passare qualsiasi variabile di input del componente figlio in questo.

parent.ts

@Component({ 
    selector: "parent", 
    template: "<div #childContainer ></div>" 
    }) 
    export class ParentComponent { 
     @ViewChild("childContainer", { read: ViewContainerRef }) childContainer: ViewContainerRef; 

     constructor(private viewContainer: ViewContainerRef, private _cr: ComponentResolver) {} 

     loadChild =(): void => { 
      this._cr.resolveComponent(Child1Component).then(cmpFactory => {    
       this.childContainer.createComponent(cmpFactory); 
      }); 
     } 
    } 

child1

@Component({ 
    selector: "child1", 
    template: "<div>{{var1}}</div><button (click)='closeMenu()'>Close</button>" 
}) 
export class Child1Component { 
    @Input() var1: string; 
    @Output() close: EventEmitter<any> = new EventEmitter<any>(); 

    constructor() {} 

    closeMenu =(): void => { 
     this.close.emit(""); 
    } 
} 

così nell'esempio sopra dicono loadChild è chiamata su un pulsante click, io sono in grado di caricare Child1Component, ma come passare var1 Input di child? anche come iscriversi alla close EventEmitter decorato con @Output

Answer 1

---

Bisogna passare imperativamente come:

loadChild(): void { 
    this._cr.resolveComponent(Child1Component).then(cmpFactory => {    
    let cmpRef = this.childContainer.createComponent(cmpFactory); 
    cmpRef.instance.var1 = someValue; 
    }); 
} 

anche simile con la registrazione gestori per le uscite.

loadChild(): void { 
    this._cr.resolveComponent(Child1Component).then(cmpFactory => {     
    let instance: any = this.childContainer.createComponent(cmpFactory).instance; 
    if (!!instance.close) { 
     // close is eventemitter decorated with @output 
     instance.close.subscribe(this.close); 
    } 
    }); 
} 

close =(): void => { 
    // do cleanup stuff.. 
    this.childContainer.clear(); 
} 

Answer 2

Ecco come ho fatto con angolari 2.2.3

let nodeElement = document.getElementById("test"); 
let compFactory = this.componentFactoryResolver.resolveComponentFactory(AnyCustomComponent); 
let component = compFactory.create(this.viewContainerRef.injector, null, nodeElement); 
// This is where you pass the @Input 
component.instance.anyInput = anyInput;