javascript - ERROR Error: No se puede insertar una Vista destruida en un ViewContainer
He diseñado una aplicación generadora de páginas por configuración y funciona bien, generando componentes y mostrándolos en la página tan bien como debería.
Pero cuando intento renderizar una nueva página con una nueva configuración, obtengo este error ERROR Error: ¡No se puede insertar una Vista destruida en un ViewContainer! justo cuando el servicio generador intenta renderizar el primer componente en la página después de limpiar la página.
La configuración de las páginas llega desde pageConfigService en ngOnInit en NemoContainerComponent y el error aparece cuando pageGenerator intenta renderizar el WidgetContainerComponent.
** ACTUALIZACIÓN **
La página se generará después de cambiar la ruta, todos los componentes base de las rutas son el NemoContainerComponent y cuando la ruta cambia, el NemoContainerComponent se destruye y se crea de nuevo.
** ACTUALIZACIÓN **
Esto es NemoContainerComponent:
@Component({
selector: 'nemo-container',
templateUrl: './nemo-container.component.html',
encapsulation: ViewEncapsulation.None
})
export class NemoContainerComponent {
private subscription: Subscription = new Subscription();
@ViewChild(ChildReferenceDirective) childReference: ChildReferenceDirective;
constructor(
private pageGenerator: PageGeneratorService,
private route: ActivatedRoute,
private routeService: RouteService,
private router: Router,
private storeEngine: StoreEngineService,
private pageConfigService: PageConfigService
) {
this.subscription.add(route.params.subscribe((params) => {
this.routeService.setRouteService = params;
}));
let activeRoute = router.url.split('/').join(' ');
document.body.className += ' ' + activeRoute;
}
ngOnInit() {
this.pageGenerator.containerRef = this.childReference.viewReference;
this.subscription.add(this.pageConfigService
.get(this.route.data['value'].page)
.subscribe(data => {
this.pageGenerator.renderNewPageByConfigurationFile(data.json)
}));
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}
WidgetContainerComponent está aquí:
@Widget({
typeName: 'widget-container',
displayName: '',
type: 'parent',
settings: []
})
@Component({
selector: 'widget-container',
templateUrl: "widget-container.component.html",
encapsulation: ViewEncapsulation.None
})
export class WidgetContainerComponent {
@ViewChild(ChildReferenceDirective, { read: ViewContainerRef }) childRef;
get childReference(): ViewContainerRef {
return this.childRef;
}
private data: ObjectInterface = {};
set widgetData(value: ObjectInterface) {
for (let item in value) {
this.data[item] = value[item];
}
}
get widgetData(): ObjectInterface {
return this.data;
}
public id: string = '';
}
** ACTUALIZACIÓN **
versión del paquete angular: 4.4.6
** ACTUALIZACIÓN **
gracias de antemano por tu ayuda :)