Przekazywanie danych wejściowych podczas tworzenia komponentu Angular 2 dynamicznie za pomocą komponentu ComponentResolver

Question

Mogę załadować dynamiczny komponent Angular 2 przy użyciu składników ComponentResolver i ViewContainerRef.

Jednak nie jestem w stanie dowiedzieć się, jak przekazać do tego dowolną zmienną wejściową komponentu potomnego.

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(""); 
    } 
} 

więc w powyższym przykładzie mówią loadChild jest nazywany na kliknięcie przycisku, jestem w stanie załadować Child1Component, ale jak przekazać var1 Wejście dziecka? także jak zapisać się do close EventEmitter ozdobione @Output

Answer 1

---

trzeba przekazać go bezwzględnie jak:

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

podobne z rejestracji teleskopowe dla wyjść.

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

To jak to zrobiłem z kątowe 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;