diff --git a/ng-sample/app/app.css b/ng-sample/app/app.css index 0593b9d36..15ec392ba 100644 --- a/ng-sample/app/app.css +++ b/ng-sample/app/app.css @@ -14,7 +14,6 @@ } button { - font-size: 20; horizontal-align: center; } diff --git a/ng-sample/app/examples/navigation/nav-component.ts b/ng-sample/app/examples/navigation/nav-component.ts index 2ca51246f..1f4028aaf 100644 --- a/ng-sample/app/examples/navigation/nav-component.ts +++ b/ng-sample/app/examples/navigation/nav-component.ts @@ -1,46 +1,114 @@ import {Component} from 'angular2/core'; -import {OnActivate, OnDeactivate, LocationStrategy, RouteParams, ComponentInstruction } from 'angular2/router'; +import {ROUTER_DIRECTIVES, Router, OnActivate, OnDeactivate, CanReuse, OnReuse, +LocationStrategy, RouteParams, ComponentInstruction, RouteConfig, Location } from 'angular2/router'; import {topmost} from "ui/frame"; import {NS_ROUTER_DIRECTIVES} from "../../nativescript-angular/router/ns-router"; +@Component({ + selector: 'main', + template: ` + + + + + + ` +}) +class MainComp { + public details: Array = [1, 2, 3]; + + constructor(private _router: Router) { + } + + onSelect(val: number) { + this._router.navigate(['../Detail', { id: val }]); + } + + routerOnActivate(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any { + console.log("MainComp.routerOnActivate()") + } + + routerOnDeactivate(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any { + console.log("MainComp.routerOnDeactivate()") + } +} + +@Component({ + selector: 'detail', + template: ` + + + + + + ` +}) +class DetailComp { + public id: number; + constructor(params: RouteParams, private _router: Router) { + this.id = parseInt(params.get("id")); + } + + onUnselect() { + this._router.navigate(['../Main']); + } + + routerOnActivate(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any { + console.log("DetailComp.routerOnActivate() id: " + this.id) + } + + routerOnDeactivate(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any { + console.log("DetailComp.routerOnDeactivate() id: " + this.id) + } +} + + @Component({ selector: 'example-group', - directives: [NS_ROUTER_DIRECTIVES], + directives: [ROUTER_DIRECTIVES, NS_ROUTER_DIRECTIVES], template: ` - + + style="font-size: 30; horizontal-align: center"> + style="font-size: 30; horizontal-align: center"> + + + + ` }) +@RouteConfig([ + { path: '/', name: 'Main', component: MainComp, useAsDefault: true }, + { path: '/:id', name: 'Detail', component: DetailComp } +]) export class NavComponent implements OnActivate, OnDeactivate { static counter: number = 0; public compId: number; public depth: number; - constructor(params: RouteParams, private location: LocationStrategy) { + constructor(params: RouteParams, private location: Location) { NavComponent.counter++; this.compId = NavComponent.counter; this.depth = parseInt(params.get("depth")); - + console.log("NavComponent.constructor() componenetID: " + this.compId) } public goBack() { - // this.location.back(); - topmost().goBack(); + this.location.back(); } routerOnActivate(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any { @@ -50,4 +118,15 @@ export class NavComponent implements OnActivate, OnDeactivate { routerOnDeactivate(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any { console.log("NavComponent.routerOnDeactivate() componenetID: " + this.compId) } + + routerCanReuse(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any { + // Reuse if depth is the same. + var reuse = (prevInstruction.params["depth"] === nextInstruction.params["depth"]); + console.log("NavComponent.routerCanReuse() componenetID: " + this.compId + " return: " + reuse); + return reuse; + } + + routerOnReuse(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any { + console.log("NavComponent.routerOnReuse() componenetID: " + this.compId); + } } \ No newline at end of file diff --git a/ng-sample/app/examples/navigation/navigation-test.ts b/ng-sample/app/examples/navigation/navigation-test.ts index 5c90487fe..99a073b1c 100644 --- a/ng-sample/app/examples/navigation/navigation-test.ts +++ b/ng-sample/app/examples/navigation/navigation-test.ts @@ -2,26 +2,34 @@ import {Component} from 'angular2/core'; import {RouteConfig, ROUTER_PROVIDERS, ROUTER_DIRECTIVES} from 'angular2/router'; import {NavComponent} from "./nav-component"; -import {NS_ROUTER_DIRECTIVES} from "../../nativescript-angular/router/ns-router"; +import {NS_ROUTER_DIRECTIVES, NS_ROUTER_PROVIDERS} from "../../nativescript-angular/router/ns-router"; @Component({ - selector:"start-nav-test", + selector: "start-nav-test", directives: [NS_ROUTER_DIRECTIVES], - template:`` + template: ` + + + + + ` }) class StartComponent { - -} +} @Component({ selector: 'navigation-test', directives: [NS_ROUTER_DIRECTIVES], - template: "" + template: ` + + + + ` }) @RouteConfig([ { path: '/', component: StartComponent, as: 'Start' }, - { path: '/nav/:depth', component: NavComponent, as: 'Nav' }, + { path: '/nav/:depth/...', component: NavComponent, as: 'Nav' }, ]) export class NavigationTest { diff --git a/src/nativescript-angular/renderer.ts b/src/nativescript-angular/renderer.ts index 4aabe6998..4ab455083 100644 --- a/src/nativescript-angular/renderer.ts +++ b/src/nativescript-angular/renderer.ts @@ -13,7 +13,7 @@ import {topmost} from 'ui/frame'; import {Page} from 'ui/page'; import * as util from "./view-util"; -//var console = {log: function(msg) {}} +var console = {log: function(msg) {}} @Injectable() export class NativeScriptRootRenderer extends RootRenderer { diff --git a/src/nativescript-angular/router/ns-location-strategy.ts b/src/nativescript-angular/router/ns-location-strategy.ts index 03973c765..ee7254781 100644 --- a/src/nativescript-angular/router/ns-location-strategy.ts +++ b/src/nativescript-angular/router/ns-location-strategy.ts @@ -2,89 +2,136 @@ import application = require("application"); import { LocationStrategy } from 'angular2/router'; import { NgZone, ApplicationRef, Inject, forwardRef } from 'angular2/core'; import { log } from "./common"; +import { topmost } from "ui/frame"; -interface LocationState -{ - state: any, - title: string, +interface LocationState { + state: any, + title: string, url: string, - queryParams: string + queryParams: string, + isPageNavigation: boolean } - + export class NSLocationStrategy extends LocationStrategy { private states = new Array(); private popStateCallbacks = new Array<(_: any) => any>(); - private ngZone: NgZone; - constructor(@Inject(forwardRef(() => NgZone)) zone: NgZone){ - super(); - - this.ngZone = zone; - //if(application.android){ - //application.android.on("activityBackPressed", (args: application.AndroidActivityBackPressedEventData) => { - //this.ngZone.run( () => { - //if(this.states.length > 1){ - //this.back(); - //args.cancel = true; - //} - //}); - //}) - //} - } - + + private _isPageNavigationgBack = false; + private _isPageNavigatingForward: boolean = false; + path(): string { log("NSLocationStrategy.path()"); - if(this.states.length > 0){ - return this.states[this.states.length - 1].url; - } - return "/"; + let state = this.peekState(); + return state ? state.url : "/"; } + prepareExternalUrl(internal: string): string { log("NSLocationStrategy.prepareExternalUrl() internal: " + internal); return internal; } + pushState(state: any, title: string, url: string, queryParams: string): void { log(`NSLocationStrategy.pushState state: ${state}, title: ${title}, url: ${url}, queryParams: ${queryParams}`); + let isNewPage = this._isPageNavigatingForward; + this._isPageNavigatingForward = false; + this.states.push({ - state: state, - title: title, - url: url, - queryParams: queryParams }); - + state: state, + title: title, + url: url, + queryParams: queryParams, + isPageNavigation: isNewPage + }); } + replaceState(state: any, title: string, url: string, queryParams: string): void { log(`NSLocationStrategy.replaceState state: ${state}, title: ${title}, url: ${url}, queryParams: ${queryParams}`); - - this.states.pop() - this.states.push({ - state: state, - title: title, - url: url, - queryParams: queryParams }); + throw new Error("Not implemented"); } + forward(): void { log("NSLocationStrategy.forward"); throw new Error("Not implemented"); } + back(): void { - log("NSLocationStrategy.back"); - - var state = this.states.pop(); - this.callPopState(state, true); + if (this._isPageNavigationgBack) { + // We are navigating to the previous page + // clear the stack until we get to a page navigation state + let state = this.states.pop(); + let count = 1; + while (!state.isPageNavigation) { + state = this.states.pop(); + count++; + } + log("NSLocationStrategy.back() while navigating back. States popped: " + count) + this.callPopState(state, true); + } else { + let state = this.peekState(); + if (state.isPageNavigation) { + // This was a page navigation - so navigate through frame. + log("NSLocationStrategy.back() while not navigating back but top state is page - will call frame.goback()") + topmost().goBack(); + } else { + // Nested navigation - just pop the state + log("NSLocationStrategy.back() while not navigating back but top state is not page - just pop") + this.callPopState(this.states.pop(), true); + } + } + } + onPopState(fn: (_: any) => any): void { log("NSLocationStrategy.onPopState"); this.popStateCallbacks.push(fn); } + getBaseHref(): string { log("NSLocationStrategy.getBaseHref()"); return ""; } - - private callPopState(state:LocationState, pop: boolean = true){ - var change = { url: state.url, pop: pop}; - for(var fn of this.popStateCallbacks){ + + private callPopState(state: LocationState, pop: boolean = true) { + var change = { url: state.url, pop: pop }; + for (var fn of this.popStateCallbacks) { fn(change); } } + + private peekState(): LocationState { + if (this.states.length > 0) { + return this.states[this.states.length - 1]; + } + return null; + } + + // Methods for syncing with page navigation in PageRouterOutlet + public beginBackPageNavigation() { + log("NSLocationStrategy.startGoBack()"); + if (this._isPageNavigationgBack) { + throw new Error("Calling startGoBack while going back.") + } + this._isPageNavigationgBack = true; + } + + public finishBackPageNavigation() { + log("NSLocationStrategy.finishBackPageNavigation()"); + if (!this._isPageNavigationgBack) { + throw new Error("Calling endGoBack while not going back.") + } + this._isPageNavigationgBack = false; + } + + public isPageNavigatingBack() { + return this._isPageNavigationgBack; + } + + public navigateToNewPage() { + log("NSLocationStrategy.navigateToNewPage()"); + if (this._isPageNavigatingForward) { + throw new Error("Calling navigateToNewPage while already navigating to new page.") + } + this._isPageNavigatingForward = true; + } } diff --git a/src/nativescript-angular/router/ns-router-link.ts b/src/nativescript-angular/router/ns-router-link.ts index bb18988a8..79be0c915 100644 --- a/src/nativescript-angular/router/ns-router-link.ts +++ b/src/nativescript-angular/router/ns-router-link.ts @@ -32,11 +32,11 @@ import { log } from "./common"; * current component's parent. */ @Directive({ - selector: '[nsRouterLink]', - inputs: ['params: nsRouterLink'], - host: { - '(tap)': 'onTap()' - } + selector: '[nsRouterLink]', + inputs: ['params: nsRouterLink'], + host: { + '(tap)': 'onTap()' + } }) export class NSRouterLink { private _routeParams: any[]; diff --git a/src/nativescript-angular/router/ns-router.ts b/src/nativescript-angular/router/ns-router.ts index d6bee22bc..45c996c08 100644 --- a/src/nativescript-angular/router/ns-router.ts +++ b/src/nativescript-angular/router/ns-router.ts @@ -8,7 +8,8 @@ import { CATEGORY } from "./common"; export const NS_ROUTER_PROVIDERS: any[] = [ ROUTER_PROVIDERS, - provide(LocationStrategy, {useClass: NSLocationStrategy}) + NSLocationStrategy, + provide(LocationStrategy, {useExisting: NSLocationStrategy}), ]; export const NS_ROUTER_DIRECTIVES: Type[] = [ diff --git a/src/nativescript-angular/router/page-router-outlet.ts b/src/nativescript-angular/router/page-router-outlet.ts index 201bd843f..5655e2183 100644 --- a/src/nativescript-angular/router/page-router-outlet.ts +++ b/src/nativescript-angular/router/page-router-outlet.ts @@ -1,64 +1,51 @@ import {PromiseWrapper} from 'angular2/src/facade/async'; import {isBlank, isPresent} from 'angular2/src/facade/lang'; +import {StringMapWrapper} from 'angular2/src/facade/collection'; import {Directive, Attribute, DynamicComponentLoader, ComponentRef, ElementRef, - Injector, provide, Type, Component, OpaqueToken, Inject} from 'angular2/core'; +Injector, provide, Type, Component, OpaqueToken, Inject} from 'angular2/core'; import * as routerHooks from 'angular2/src/router/lifecycle_annotations'; import { hasLifecycleHook} from 'angular2/src/router/route_lifecycle_reflector'; import { ComponentInstruction, RouteParams, RouteData, RouterOutlet, LocationStrategy, Router, - OnActivate, OnDeactivate } from 'angular2/router'; - +OnActivate, OnDeactivate, CanReuse, OnReuse } from 'angular2/router'; + import { topmost } from "ui"; import { Page, NavigatedData } from "ui/page"; import { log } from "./common"; +import { NSLocationStrategy } from "./ns-location-strategy"; + let COMPONENT = new OpaqueToken("COMPONENT"); let _resolveToTrue = PromiseWrapper.resolve(true); let _resolveToFalse = PromiseWrapper.resolve(false); + +interface CacheItem { + componentRef: ComponentRef; + router: Router; +} + /** * Reference Cache */ class RefCache { - private cache: Array = new Array(); + private cache: Array = new Array(); - public push(comp: ComponentRef) { - this.cache.push(comp); + public push(comp: ComponentRef, router: Router) { + this.cache.push({ componentRef: comp, router: router }); } - public pop(): ComponentRef { + public pop(): CacheItem { return this.cache.pop(); } - public peek(): ComponentRef { + public peek(): CacheItem { return this.cache[this.cache.length - 1]; } } -var _isGoingBack = false; -function startGoBack() { - log("startGoBack()"); - if (_isGoingBack) { - throw new Error("Calling startGoBack while going back.") - } - _isGoingBack = true; -} - -function endGoBack() { - log("endGoBack()"); - if (!_isGoingBack) { - throw new Error("Calling endGoBack while not going back.") - } - _isGoingBack = false; -} - -function isGoingBack() { - return _isGoingBack; -} - - /** * A router outlet that does page navigation in NativeScript * @@ -80,7 +67,8 @@ export class PageRouterOutlet extends RouterOutlet { constructor(private elementRef: ElementRef, private loader: DynamicComponentLoader, private parentRouter: Router, - @Attribute('name') nameAttr: string) { + @Attribute('name') nameAttr: string, + private location: NSLocationStrategy) { super(elementRef, loader, parentRouter, nameAttr) } @@ -95,13 +83,16 @@ export class PageRouterOutlet extends RouterOutlet { let componentType = nextInstruction.componentType; this.currentInstruction = nextInstruction; - if (isGoingBack()) { + if (this.location.isPageNavigatingBack()) { log("PageRouterOutlet.activate() - Back naviation, so load from cache: " + componentType.name); - endGoBack(); + this.location.finishBackPageNavigation(); // Get Component form ref and just call the activate hook - this.componentRef = this.refCache.peek(); + let cacheItem = this.refCache.peek(); + this.componentRef = cacheItem.componentRef; + this.replaceChildRouter(cacheItem.router); + this.currentComponentType = componentType; this.checkComponentRef(this.componentRef, nextInstruction); @@ -109,8 +100,7 @@ export class PageRouterOutlet extends RouterOutlet { return (this.componentRef.instance) .routerOnActivate(nextInstruction, previousInstruction); } - } - else { + } else { let childRouter = this.parentRouter.childRouter(componentType); let providers = Injector.resolve([ provide(RouteData, { useValue: nextInstruction.routeData }), @@ -123,8 +113,7 @@ export class PageRouterOutlet extends RouterOutlet { if (this.isInitalPage) { log("PageRouterOutlet.activate() inital page - just load component: " + componentType.name); this.isInitalPage = false; - } - else { + } else { log("PageRouterOutlet.activate() forward navigation - wrap component in page: " + componentType.name); componentType = PageShim; } @@ -133,7 +122,7 @@ export class PageRouterOutlet extends RouterOutlet { .then((componentRef) => { this.componentRef = componentRef; this.currentComponentType = componentType; - this.refCache.push(componentRef); + this.refCache.push(componentRef, childRouter); if (hasLifecycleHook(routerHooks.routerOnActivate, componentType)) { return (this.componentRef.instance) @@ -161,10 +150,10 @@ export class PageRouterOutlet extends RouterOutlet { (this.componentRef.instance).routerOnDeactivate(nextInstruction, this.currentInstruction)); } - if (isGoingBack()) { + if (this.location.isPageNavigatingBack()) { log("PageRouterOutlet.deactivate() while going back - should dispose: " + instruction.componentType.name) return next.then((_) => { - let popedRef = this.refCache.pop(); + let popedRef = this.refCache.pop().componentRef; if (this.componentRef !== popedRef) { throw new Error("Current componentRef is different for cached componentRef"); @@ -176,8 +165,7 @@ export class PageRouterOutlet extends RouterOutlet { this.componentRef = null; } }); - } - else { + } else { return next; } } @@ -188,27 +176,61 @@ export class PageRouterOutlet extends RouterOutlet { * is currently not supported in NativeScript. */ routerCanDeactivate(nextInstruction: ComponentInstruction): Promise { + this.log("routerCanDeactivate", nextInstruction); + return _resolveToTrue; } /** * Called by the {@link Router} during recognition phase of a navigation. - * For PageRouterOutlet it always reurns false, as there is no way to reuse - * the same componenet between two pages. + * + * If the new child component has a different Type than the existing child component, + * this will resolve to `false`. You can't reuse an old component when the new component + * is of a different Type. + * + * Otherwise, this method delegates to the child component's `routerCanReuse` hook if it exists, + * or resolves to true if the hook is not present and params are equal. */ routerCanReuse(nextInstruction: ComponentInstruction): Promise { - return _resolveToFalse; + this.log("routerCanReuse", nextInstruction); + + var result; + + if (isBlank(this.currentInstruction) || this.currentInstruction.componentType != nextInstruction.componentType) { + result = false; + } else if (hasLifecycleHook(routerHooks.routerCanReuse, this.currentInstruction.componentType)) { + result = (this.componentRef.instance) + .routerCanReuse(nextInstruction, this.currentInstruction); + } else { + result = nextInstruction == this.currentInstruction || + (isPresent(nextInstruction.params) && isPresent(this.currentInstruction.params) && + StringMapWrapper.equals(nextInstruction.params, this.currentInstruction.params)); + } + + log("PageRouterOutlet.routerCanReuse(): " + result); + return PromiseWrapper.resolve(result); + } /** - * Called by the {@link Router} during the commit phase of a navigation when an outlet - * reuses a component between different routes. - * For PageRouterOutlet this method should never be called, - * because routerCanReuse always returns false. + * Called by the {@link Router} during recognition phase of a navigation. + * + * If this resolves to `false`, the given navigation is cancelled. + * + * This method delegates to the child component's `routerCanDeactivate` hook if it exists, + * and otherwise resolves to true. */ reuse(nextInstruction: ComponentInstruction): Promise { - throw new Error("reuse() method should never be called for PageRouterOutlet.") - return _resolveToFalse; + var previousInstruction = this.currentInstruction; + this.currentInstruction = nextInstruction; + + if (isBlank(this.componentRef)) { + throw new Error(`Cannot reuse an outlet that does not contain a component.`); + } + + return PromiseWrapper.resolve( + hasLifecycleHook(routerHooks.routerOnReuse, this.currentComponentType) ? + (this.componentRef.instance).routerOnReuse(nextInstruction, previousInstruction) : true); } private checkComponentRef(popedRef: ComponentRef, instruction: ComponentInstruction) { @@ -220,8 +242,18 @@ export class PageRouterOutlet extends RouterOutlet { } } + private replaceChildRouter(childRouter: Router) { + // HACKY HACKY HACKY + // When navigationg back - we need to set the child router of + // our router - with the one we have created for the previosus page. + // Otherwise router-outlets inside that page wont't work. + // Curretly there is no other way to do that (parentRouter.childRouter() will create ne router). + + this.parentRouter["_childRouter"] = childRouter; + } + private log(method: string, nextInstruction: ComponentInstruction) { - log("PageRouterOutlet." + method + " isBack: " + isGoingBack() + " nextUrl: " + nextInstruction.urlPath); + log("PageRouterOutlet." + method + " isBack: " + this.location.isPageNavigatingBack() + " nextUrl: " + nextInstruction.urlPath); } } @@ -233,7 +265,7 @@ export class PageRouterOutlet extends RouterOutlet { ` }) -class PageShim implements OnActivate, OnDeactivate { +class PageShim implements OnActivate, OnDeactivate, CanReuse, OnReuse { private static pageShimCount: number = 0; private id: number; private isInitialized: boolean; @@ -242,7 +274,7 @@ class PageShim implements OnActivate, OnDeactivate { constructor( private element: ElementRef, private loader: DynamicComponentLoader, - private locationStrategy: LocationStrategy, + private locationStrategy: NSLocationStrategy, @Inject(COMPONENT) public componentType: Type ) { this.id = PageShim.pageShimCount++; @@ -270,6 +302,7 @@ class PageShim implements OnActivate, OnDeactivate { //TODO: assuming it's a Layout. (viewContainer.parent).removeChild(viewContainer); + this.locationStrategy.navigateToNewPage(); topmost().navigate({ animated: true, create: () => { @@ -281,7 +314,7 @@ class PageShim implements OnActivate, OnDeactivate { page.on('navigatingFrom', (global).zone.bind((args: NavigatedData) => { if (args.isBackNavigation) { - startGoBack(); + this.locationStrategy.beginBackPageNavigation(); this.locationStrategy.back(); } })); @@ -310,6 +343,20 @@ class PageShim implements OnActivate, OnDeactivate { } } + routerCanReuse(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any { + this.log("routerCanReuse"); + if (hasLifecycleHook(routerHooks.routerCanReuse, this.componentType)) { + return (this.componentRef.instance).routerCanReuse(nextInstruction, prevInstruction); + } + } + + routerOnReuse(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any { + this.log("routerOnReuse"); + if (hasLifecycleHook(routerHooks.routerOnReuse, this.componentType)) { + return (this.componentRef.instance).routerOnReuse(nextInstruction, prevInstruction); + } + } + private log(methodName: string) { log("PageShim(" + this.id + ")." + methodName) } diff --git a/src/nativescript-angular/view-util.ts b/src/nativescript-angular/view-util.ts index 0ad7b9c5c..3a5aaea19 100644 --- a/src/nativescript-angular/view-util.ts +++ b/src/nativescript-angular/view-util.ts @@ -6,7 +6,7 @@ import {LayoutBase} from 'ui/layouts/layout-base'; import {ViewClass, getViewClass, isKnownView} from './element-registry'; import {getSpecialPropertySetter} from "ui/builder/special-properties"; -//var console = {log: function(msg) {}} +var console = {log: function(msg) {}} export interface ViewExtensions { nodeName: string;