From 6c8682a1c4f4c7bd1a0ce72769cabc4108227f77 Mon Sep 17 00:00:00 2001 From: vakrilov Date: Fri, 20 May 2016 16:32:37 +0300 Subject: [PATCH] Remove usages of Dynmamic ComponentLoader --- .../common/detached-loader.ts | 15 ++++---- .../directives/dialogs.ts | 21 ++++++------ .../router/page-router-outlet.ts | 34 +++++++++++-------- 3 files changed, 38 insertions(+), 32 deletions(-) diff --git a/src/nativescript-angular/common/detached-loader.ts b/src/nativescript-angular/common/detached-loader.ts index 67bbad333..d0d059310 100644 --- a/src/nativescript-angular/common/detached-loader.ts +++ b/src/nativescript-angular/common/detached-loader.ts @@ -1,4 +1,4 @@ -import {DynamicComponentLoader, ComponentRef, ViewContainerRef, Component, Type, ViewChild} from '@angular/core'; +import {ComponentRef, ViewContainerRef, Component, Type, ViewChild, ComponentResolver} from '@angular/core'; type AnyComponentRef = ComponentRef; interface PendingLoadEntry { @@ -11,23 +11,20 @@ interface PendingLoadEntry { * It uses DetachedContainer as selector so that it is containerRef is not attached to the visual tree. */ @Component({ - selector: 'DetachedContainer', + selector: 'DetachedContainer', template: `` }) export class DetachedLoader { @ViewChild('loader', { read: ViewContainerRef }) containerRef: ViewContainerRef; - private viewLoaded = false; + private viewLoaded = false; private pendingLoads: PendingLoadEntry[] = []; - constructor( - private loader: DynamicComponentLoader - ) { + constructor(private compiler: ComponentResolver) { } public ngAfterViewInit() { this.viewLoaded = true; - this.pendingLoads.forEach(loadEntry => { this.loadInLocation(loadEntry.componentType).then(loadedRef => { loadEntry.resolveCallback(loadedRef); @@ -36,7 +33,9 @@ export class DetachedLoader { } private loadInLocation(componentType: Type): Promise> { - return this.loader.loadNextToLocation(componentType, this.containerRef); + return this.compiler.resolveComponent(componentType).then((componentFactory) => { + return this.containerRef.createComponent(componentFactory, this.containerRef.length, this.containerRef.parentInjector, null); + }); } public loadComponent(componentType: Type): Promise> { diff --git a/src/nativescript-angular/directives/dialogs.ts b/src/nativescript-angular/directives/dialogs.ts index 9ed90f4a5..7d6438414 100644 --- a/src/nativescript-angular/directives/dialogs.ts +++ b/src/nativescript-angular/directives/dialogs.ts @@ -1,4 +1,4 @@ -import {ReflectiveInjector, DynamicComponentLoader, ViewContainerRef, Injector, provide, Type, Injectable, ComponentRef, Directive} from '@angular/core'; +import {ReflectiveInjector, ComponentResolver, ViewContainerRef, Injector, provide, Type, Injectable, ComponentRef, Directive} from '@angular/core'; import {Page} from 'ui/page'; import {View} from 'ui/core/view'; import {DetachedLoader} from '../common/detached-loader'; @@ -21,7 +21,7 @@ export class ModalDialogService { constructor( private page: Page, - private loader: DynamicComponentLoader) { + private compiler: ComponentResolver) { } public registerViewContainerRef(ref: ViewContainerRef) { @@ -48,21 +48,22 @@ export class ModalDialogService { provide(ModalDialogParams, { useValue: modalParams }), ]); - this.loader.loadNextToLocation(DetachedLoader, this.containerRef, providers) - .then((loaderRef) => { - detachedLoaderRef = loaderRef; - return (loaderRef.instance).loadComponent(type) - }) - .then((compRef) => { - //Component loaded. Find its root native view. + this.compiler.resolveComponent(DetachedLoader).then((detachedFactory) => { + const childInjector = ReflectiveInjector.fromResolvedProviders(providers, this.containerRef.parentInjector); + detachedLoaderRef = this.containerRef.createComponent(detachedFactory, -1, childInjector, null) + + detachedLoaderRef.instance.loadComponent(type).then((compRef) => { const componentView = compRef.location.nativeElement; + if (componentView.parent) { (componentView.parent).removeChild(componentView); } + page.content = componentView; this.page.showModal(page, options.context, closeCallback, options.fullscreen); }); - }) + }); + }); } } diff --git a/src/nativescript-angular/router/page-router-outlet.ts b/src/nativescript-angular/router/page-router-outlet.ts index d360bf700..a047cf4a8 100644 --- a/src/nativescript-angular/router/page-router-outlet.ts +++ b/src/nativescript-angular/router/page-router-outlet.ts @@ -3,16 +3,16 @@ import {isBlank, isPresent} from '@angular/core/src/facade/lang'; import {StringMapWrapper} from '@angular/core/src/facade/collection'; import { - Attribute, DynamicComponentLoader, ComponentRef, + Attribute, ComponentRef, ViewContainerRef, ViewChild, ElementRef, ReflectiveInjector, provide, Type, - Component, Inject + Component, Inject, DynamicComponentLoader, ComponentResolver } from '@angular/core'; import * as routerHooks from '@angular/router-deprecated/src/lifecycle/lifecycle_annotations'; import {hasLifecycleHook} from '@angular/router-deprecated/src/lifecycle/route_lifecycle_reflector'; -import {Router, RouterOutlet, RouteData, RouteParams, ComponentInstruction, +import {Router, RouterOutlet, RouteData, RouteParams, ComponentInstruction, OnActivate, OnDeactivate, OnReuse, CanReuse} from '@angular/router-deprecated'; import {LocationStrategy} from '@angular/common'; import {topmost} from "ui/frame"; @@ -78,12 +78,13 @@ export class PageRouterOutlet extends RouterOutlet { constructor( private containerRef: ViewContainerRef, - private loader: DynamicComponentLoader, + private compiler: ComponentResolver, private parentRouter: Router, @Attribute('name') nameAttr: string, private location: NSLocationStrategy, + loader: DynamicComponentLoader, @Inject(DEVICE) device: Device - ) { + ) { super(containerRef, loader, parentRouter, nameAttr); this.viewUtil = new ViewUtil(device); } @@ -135,20 +136,25 @@ export class PageRouterOutlet extends RouterOutlet { if (this.isInitalPage) { log("PageRouterOutlet.activate() inital page - just load component: " + componentType.name); this.isInitalPage = false; - resultPromise = this.loader.loadNextToLocation(componentType, this.containerRef, ReflectiveInjector.resolve(providersArray)); + resultPromise = this.compiler.resolveComponent(componentType).then((componentFactory) => { + const childInjector = ReflectiveInjector.resolveAndCreate(providersArray, this.containerRef.parentInjector); + return this.containerRef.createComponent(componentFactory, this.containerRef.length, childInjector, null); + }); } else { log("PageRouterOutlet.activate() forward navigation - create detached loader in the loader container: " + componentType.name); const page = new Page(); providersArray.push(provide(Page, { useValue: page })); - resultPromise = this.loader.loadNextToLocation(DetachedLoader, this.childContainerRef, ReflectiveInjector.resolve(providersArray)) - .then((pageComponentRef) => { - loaderRef = pageComponentRef; - return (loaderRef.instance).loadComponent(componentType); - }) - .then((actualCoponenetRef) => { - return this.loadComponentInPage(page, actualCoponenetRef); - }) + const childInjector = ReflectiveInjector.resolveAndCreate(providersArray, this.containerRef.parentInjector); + + resultPromise = this.compiler.resolveComponent(DetachedLoader).then((componentFactory) => { + loaderRef = this.childContainerRef.createComponent(componentFactory, this.childContainerRef.length, childInjector, null); + + return (loaderRef.instance).loadComponent(componentType) + .then((actualCoponenetRef) => { + return this.loadComponentInPage(page, actualCoponenetRef); + }); + }); } return resultPromise.then((componentRef) => {