Tengo un componente que contiene <ng-template #placeholder></ng-template> en su plantilla para insertar componentes dinámicamente. En OnInit, se llama a un método "loadComponents" que usa viewRef, pero no puede la segunda vez que se carga:
@ViewChild("placeholder", { read: ViewContainerRef, static: false }) private viewRef: ViewContainerRef; private loadComponents() { if (this.viewRef) { this.viewRef.clear(); this.criteria.forEach((criterion) => { if (Object.keys(this.componentMap).includes(criterion.type)) { const componentFactory = this.cfr.resolveComponentFactory( this.componentMap[criterion.type] ); const componentRef = this.viewRef.createComponent(componentFactory); } }); } }Este componente es un formulario para un componente de búsqueda que incluye.
Después de iniciar la búsqueda, el componente de búsqueda muestra los datos a continuación y tiene enlaces a las vistas detalladas. Pero cuando abro la vista detallada y vuelvo a la página de búsqueda, que contiene los criterios de búsqueda en una tienda, viewRef no está definido. Cuando lo verifico "más tarde" con las herramientas angulares, se define viewRef. Así que supongo que se inyecta después de OnInit.
Alguna idea de cómo solucionar este problema?
Tengo una solución. Creé un nuevo subcomponente que envuelve el marcador de posición. No necesitaba ChangeDetection OnPush en la vista ref. Pero loadComponents no se activa en ngOnChanges.