reactivos - Pasar la entrada mientras se crea el componente Angular 2 dinámicamente usando ComponentResolver

pasar parametros entre componentes angular 4

Question

Puedo cargar un componente dinámico de Angular 2 utilizando ComponentResolver y ViewContainerRef.

Sin embargo, no puedo averiguar cómo pasar una variable de entrada del componente secundario a esto.

padre.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);
});
}
}

niño1

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

así que en el ejemplo anterior, digamos que se está llamando a loadChild con un clic en el botón, puedo cargar Child1Component, pero ¿cómo pasar var1 Input of child? También Cómo suscribirse para close EventEmitter decorado con @Output

Answer 1

Así es como lo hice con Angular 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;

Answer 2

Tienes que pasarlo imperativamente como:

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

También similar con el registro de manejadores de salidas.

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