From acec4f7fe5d4aacfdbe96f33565e4d428adeac2a Mon Sep 17 00:00:00 2001 From: Eduardo Speroni Date: Sun, 20 Sep 2020 18:42:46 -0300 Subject: [PATCH 1/2] fix(detached-loader): completely deatch components --- .../common/detached-loader.ts | 21 +++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/nativescript-angular/common/detached-loader.ts b/nativescript-angular/common/detached-loader.ts index a2dab3643..cdc2d8c7a 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,22 @@ 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 +36,10 @@ export class DetachedLoader { return Promise.resolve(componentRef); } + public ngOnDestroy() { + this.disposeFunctions.forEach((fn) => fn()); + } + public detectChanges() { this.changeDetector.markForCheck(); } From f75ab45ff566987ce24372ab434e35ad167ff0c5 Mon Sep 17 00:00:00 2001 From: Eduardo Speroni Date: Sun, 20 Sep 2020 21:32:23 -0300 Subject: [PATCH 2/2] chore: fix lint --- nativescript-angular/common/detached-loader.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/nativescript-angular/common/detached-loader.ts b/nativescript-angular/common/detached-loader.ts index cdc2d8c7a..b98fbb3b9 100644 --- a/nativescript-angular/common/detached-loader.ts +++ b/nativescript-angular/common/detached-loader.ts @@ -11,10 +11,9 @@ import { Trace } from '@nativescript/core'; template: ``, }) 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, private appRef: ApplicationRef) { } + constructor(private resolver: ComponentFactoryResolver, private changeDetector: ChangeDetectorRef, private containerRef: ViewContainerRef, private appRef: ApplicationRef) {} private loadInLocation(componentType: Type): Promise> { const factory = this.resolver.resolveComponentFactory(componentType); @@ -26,7 +25,6 @@ export class DetachedLoader implements OnDestroy { 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. // We are inside a promise here so no need for setTimeout - CD should trigger