Necesito un servicio de apertura modal global que pueda crear componentes dinámicos desde cualquier módulo. Tengo varios módulos y cada uno de ellos tiene componentes modales. He simplificado la estructura de mi proyecto así:
AppModule ---ModalOpenerService --ModalTemplate ---AModule ---ModalComponent1 ---ModalComponent2 ---SimpleComponent ---BModule ---ModalComponent3 ---ModalComponent4El servicio de apertura modal tiene un método como este:
@ViewChild('modalContainer', {read: ViewContainerRef}) modalContainer; showModal(component: Type<any>,data?:any){ let componentFactory = this.resolver.resolveComponentFactory(component); this.modalContainer.createComponent(componentFactory ); }Quiero que mi ModalOpenerService pueda crear cualquier componente modal y mostrarlo. Pero el problema es que los componentes modales pertenecen a diferentes módulos y el abridor modal no puede encontrarlos en la lista de fábrica de componentes de su inyector.
No component factory found for ModalComponent1. Did you add it to @NgModule.entryComponentsObviamente, ModalComponent1 no es miembro de AppModule.
Podría abrir modales pasando el método de fábrica como parámetro en lugar del tipo de componente como este:
//In SimpleComponent, I call my ModalOpenerService to open modal1. Because //the simpleComponent's parent injector (AModule's injector) can find Modal1, //this.resolver can resolve Modal1. showModal1(){ this.modalOpenerService.showModal(this.resolver.resolveComponentFactory(ModalComponent1)); }En ModalOpenerService
@ViewChild('modalContainer', {read: ViewContainerRef}) modalContainer; showModal(factory:ComponentFactory<any>, data?:any){ this.modalContainer.createComponent(factory); } Por lo tanto, los módulos crean sus propios componentes y pueden encontrar el componente en su entryComponents de componentes de entrada.
Todavía tenemos un problema, porque cualquier componente modal creado en el alcance de AppModule y si quiero mostrar otro modal de un modal, el inyector de AppModule aún no podrá encontrarlo.
Una solución puede ser poner todos los modales en el mismo módulo con ModalOpenerService pero quiero todos los modales en su propio Módulo.
Cualquier sugerencia de diseño estructural también es bienvenida
Debe tener ModalOpenerService como módulo separado como sea
export class ModelModule { static WithComponents(components: Array<Type<any>>): Array<any> { return { ngModule: ModelModule, providers: [ { provide: ANALYZE_FOR_ENTRY_COMPONENTS, useValue: components, multi: true } ] } } }Y desde AModule y BModule puede incluir un ModelModule como se muestra a continuación
@NgModule({ imports: [BrowserModule, ModelModule.WithComponents([ModalComponent1, ModalComponent2])], declarations: [AppComponent, ModalComponent1, ModalComponent2], bootstrap: [AppComponent], providers: [] }) export class AModule { }