1- import { ComponentRef , ComponentFactory , ViewContainerRef , Component , Type , ComponentFactoryResolver , ChangeDetectorRef } from '@angular/core' ;
1+ import { ComponentRef , ComponentFactory , ViewContainerRef , Component , Type , ComponentFactoryResolver , ChangeDetectorRef , ApplicationRef , OnDestroy } from '@angular/core' ;
22import { Trace } from '@nativescript/core' ;
33
44/**
@@ -10,13 +10,20 @@ import { Trace } from '@nativescript/core';
1010 selector : 'DetachedContainer' ,
1111 template : `<Placeholder #loader></Placeholder>` ,
1212} )
13- export class DetachedLoader {
13+ export class DetachedLoader implements OnDestroy {
14+ private disposeFunctions : Array < ( ) => void > = [ ] ;
1415 // tslint:disable-line:component-class-suffix
15- constructor ( private resolver : ComponentFactoryResolver , private changeDetector : ChangeDetectorRef , private containerRef : ViewContainerRef ) { }
16+ constructor ( private resolver : ComponentFactoryResolver , private changeDetector : ChangeDetectorRef , private containerRef : ViewContainerRef , private appRef : ApplicationRef ) { }
1617
1718 private loadInLocation ( componentType : Type < any > ) : Promise < ComponentRef < any > > {
1819 const factory = this . resolver . resolveComponentFactory ( componentType ) ;
19- const componentRef = this . containerRef . createComponent ( factory , this . containerRef . length , this . containerRef . injector ) ;
20+ const componentRef = factory . create ( this . containerRef . injector ) ;
21+ this . appRef . attachView ( componentRef . hostView ) ;
22+ 23+ this . disposeFunctions . push ( ( ) => {
24+ this . appRef . detachView ( componentRef . hostView ) ;
25+ componentRef . destroy ( ) ;
26+ } ) ;
2027
2128 // Component is created, built may not be checked if we are loading
2229 // inside component with OnPush CD strategy. Mark us for check to be sure CD will reach us.
@@ -27,6 +34,10 @@ export class DetachedLoader {
2734 return Promise . resolve ( componentRef ) ;
2835 }
2936
37+ public ngOnDestroy ( ) {
38+ this . disposeFunctions . forEach ( ( fn ) => fn ( ) ) ;
39+ }
40+ 3041 public detectChanges ( ) {
3142 this . changeDetector . markForCheck ( ) ;
3243 }
0 commit comments