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(); } diff --git a/nativescript-angular/renderer.ts b/nativescript-angular/renderer.ts index bc6f8a5f8..c91d0abc5 100644 --- a/nativescript-angular/renderer.ts +++ b/nativescript-angular/renderer.ts @@ -31,7 +31,8 @@ export class NativeScriptRenderer extends Renderer2 { } @profile - insertBefore(parent: NgView, newChild: NgView, { previous, next }: ElementReference): void { + insertBefore(parent: NgView, newChild: NgView, refChild: NgView | ElementReference): void { + let { previous, next } = refChild instanceof View ? this.nextSibling(refChild) : refChild; if (NativeScriptDebug.isLogEnabled()) { NativeScriptDebug.rendererLog(`NativeScriptRenderer.insertBefore child: ${newChild} ` + `parent: ${parent} previous: ${previous} next: ${next}`); }