Búsqueda de sitios web

typescript - Componente cargado dinámicamente en Angular 2, ¿los eventos no se disparan de vuelta?

Usé el Cargador de Componentes Dinámicos de Angular2. Todo está funcionando bien.

Mi componente cargado dinámicamente emite eventos, pero no puedo capturarlos en ningún lugar.

Código de padre:

this.dcl.loadAsRoot(SomeComponent, "#dynamiccomponenthere", this.injector)

Plantilla principal:

<div id="dynamiccomponenthere" (somecustomevent)="someFunc()"></div>

Niño :

...
this.somecustomevent.emit(data)
...

*SOLUCIÓN: (gracias Gunther) *

cmp.instance['somecustomevent'].subscribe(ev => {
    this.consoleLog(ev) // run function in parent!
})

Respuesta #1

  • LoadAsRoot no invoca la detección de cambios

Actualmente loadAsRoot() solo se utiliza para iniciar el componente raíz (AppComponent) y no se admiten entradas en el componente raíz.

Se explica una solución alternativa en este comentario https://github.com/angular/angular/issues/6370#issuecomment-193896657

al usar loadAsRoot necesitas activar la detección de cambios y conectar manualmente Inputs, Outputs, Injector y la función de eliminación del componente

function onYourComponentDispose() {
}
let el = this.elementRef
let reuseInjectorOrCreateNewOne = this.injector;
this.componentLoader.loadAsRoot(YourComponent, this.elementRef, reuseInjectorOrCreateNewOne, onYourComponentDispose)
.then((compRef: ComponentRef) => {
  // manually include Inputs
  compRef.instance['myInputValue'] = {res: 'randomDataFromParent'};
  // manually include Outputs
  compRef.instance['myOutputValue'].subscribe(this.parentObserver)
  // trigger change detection
  cmpRef.location.internalElement.parentView.changeDetector.ref.detectChanges()
  // always return in a promise
  return compRef
});

Véase también @ContentChild es nulo para DynamicComponentLoader

Artículos relacionados