From 623d2f79e014017fd993685051d125b3c5c72ada Mon Sep 17 00:00:00 2001 From: Eduardo Speroni Date: Sun, 20 Sep 2020 22:27:03 -0300 Subject: [PATCH] fix(detached-loader): completely deatch components (#2257) --- .../common/detached-loader.ts | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/nativescript-angular/common/detached-loader.ts b/nativescript-angular/common/detached-loader.ts index a2dab3643..b98fbb3b9 100644 --- a/nativescript-angular/common/detached-loader.ts +++ b/nativescript-angular/common/detached-loader.ts @@ -1,4 +1,4 @@ -import { ComponentRef, ComponentFactory, ViewContainerRef, Component, Type, ComponentFactoryResolver, ChangeDetectorRef } from '@angular/core'; +import { ComponentRef, ComponentFactory, ViewContainerRef, Component, Type, ComponentFactoryResolver, ChangeDetectorRef, ApplicationRef, OnDestroy } from '@angular/core'; import { Trace } from '@nativescript/core'; /** @@ -10,13 +10,20 @@ import { Trace } from '@nativescript/core'; selector: 'DetachedContainer', template: ``, }) -export class DetachedLoader { +export class DetachedLoader implements OnDestroy { + private disposeFunctions: Array<() => void> = []; // tslint:disable-line:component-class-suffix - constructor(private resolver: ComponentFactoryResolver, private changeDetector: ChangeDetectorRef, private containerRef: ViewContainerRef) {} + constructor(private resolver: ComponentFactoryResolver, private changeDetector: ChangeDetectorRef, private containerRef: ViewContainerRef, private appRef: ApplicationRef) {} private loadInLocation(componentType: Type): Promise> { const factory = this.resolver.resolveComponentFactory(componentType); - const componentRef = this.containerRef.createComponent(factory, this.containerRef.length, this.containerRef.injector); + const componentRef = factory.create(this.containerRef.injector); + this.appRef.attachView(componentRef.hostView); + + this.disposeFunctions.push(() => { + this.appRef.detachView(componentRef.hostView); + componentRef.destroy(); + }); // Component is created, built may not be checked if we are loading // inside component with OnPush CD strategy. Mark us for check to be sure CD will reach us. @@ -27,6 +34,10 @@ export class DetachedLoader { return Promise.resolve(componentRef); } + public ngOnDestroy() { + this.disposeFunctions.forEach((fn) => fn()); + } + public detectChanges() { this.changeDetector.markForCheck(); }