From 7433d9d34d5a3ad01bf272bfe54647a855433d8d Mon Sep 17 00:00:00 2001 From: ADjenkov Date: Fri, 23 Nov 2018 13:49:17 +0200 Subject: [PATCH 1/2] fix(router-extensions): unable to go back with relativeTo param --- .../router/ns-location-strategy.ts | 4 +++ .../router/router-extensions.ts | 34 +++++++++++++------ 2 files changed, 27 insertions(+), 11 deletions(-) diff --git a/nativescript-angular/router/ns-location-strategy.ts b/nativescript-angular/router/ns-location-strategy.ts index 3798731b1..54d6d6b3b 100644 --- a/nativescript-angular/router/ns-location-strategy.ts +++ b/nativescript-angular/router/ns-location-strategy.ts @@ -41,6 +41,10 @@ export class Outlet { return this.frames.indexOf(frame) > -1; } + isNSEmptyOutlet(): boolean { + return this.frames.length > 1; + } + peekState(): LocationState { if (this.states.length > 0) { return this.states[this.states.length - 1]; diff --git a/nativescript-angular/router/router-extensions.ts b/nativescript-angular/router/router-extensions.ts index 0943f8acb..3e582f90c 100644 --- a/nativescript-angular/router/router-extensions.ts +++ b/nativescript-angular/router/router-extensions.ts @@ -93,22 +93,24 @@ export class RouterExtensions { const outletsToBack: Array = []; const rootRoute: ActivatedRoute = this.router.routerState.root; let outlets = options.outlets; - let relativeRoute = options.relativeTo; + let relativeRoute = options.relativeTo || rootRoute; - if (!outlets && relativeRoute) { - outlets = [relativeRoute.outlet]; - relativeRoute = relativeRoute.parent || rootRoute; - } else if (!relativeRoute) { - relativeRoute = rootRoute; + const relativeRouteOutlet = this.findOutletByRoute(relativeRoute); + const isNSEmptyOutlet = relativeRouteOutlet && relativeRouteOutlet.isNSEmptyOutlet(); + + // Lazy named outlet has added 'primary' inner NSEmptyOutlet child. + // Take parent route when `relativeTo` option points to the outer named outlet. + if (isNSEmptyOutlet && relativeRoute.outlet !== "primary") { + relativeRoute = relativeRoute.parent || relativeRoute; } - for (let index = 0; index < relativeRoute.children.length; index++) { - const currentRoute = relativeRoute.children[index]; + const routesToMatch = outlets ? relativeRoute.children : [relativeRoute]; + outlets = outlets || [relativeRoute.outlet]; + for (let index = 0; index < routesToMatch.length; index++) { + const currentRoute = routesToMatch[index]; if (outlets.some(currentOutlet => currentOutlet === currentRoute.outlet)) { - const currentRouteSnapshop = findTopActivatedRouteNodeForOutlet(currentRoute.snapshot); - const outletKey = this.locationStrategy.getRouteFullPath(currentRouteSnapshop); - let outlet = this.locationStrategy.findOutletByKey(outletKey); + let outlet = this.findOutletByRoute(currentRoute); if (outlet) { outletsToBack.push(outlet); @@ -118,4 +120,14 @@ export class RouterExtensions { return { outletsToBack: outletsToBack, outlets: outlets }; } + + private findOutletByRoute(currentRoute: ActivatedRoute): Outlet { + let outlet; + + const currentRouteSnapshop = findTopActivatedRouteNodeForOutlet(currentRoute.snapshot); + const outletKey = this.locationStrategy.getRouteFullPath(currentRouteSnapshop); + outlet = this.locationStrategy.findOutletByKey(outletKey); + + return outlet; + } } From 45ece4cb0f17403eecb279604b17045ebac3a640 Mon Sep 17 00:00:00 2001 From: ADjenkov Date: Mon, 26 Nov 2018 11:19:06 +0200 Subject: [PATCH 2/2] refactor(outlet): introduce isNSEmptyOutlet property --- nativescript-angular/router/ns-location-strategy.ts | 5 +---- nativescript-angular/router/page-router-outlet.ts | 1 + nativescript-angular/router/router-extensions.ts | 4 ++-- 3 files changed, 4 insertions(+), 6 deletions(-) diff --git a/nativescript-angular/router/ns-location-strategy.ts b/nativescript-angular/router/ns-location-strategy.ts index 54d6d6b3b..1c621a87e 100644 --- a/nativescript-angular/router/ns-location-strategy.ts +++ b/nativescript-angular/router/ns-location-strategy.ts @@ -25,6 +25,7 @@ export class Outlet { path: string; pathByOutlets: string; states: Array = []; + isNSEmptyOutlet: boolean; // Used in reuse-strategy by its children to determine if they should be detached too. shouldDetach: boolean = true; @@ -41,10 +42,6 @@ export class Outlet { return this.frames.indexOf(frame) > -1; } - isNSEmptyOutlet(): boolean { - return this.frames.length > 1; - } - peekState(): LocationState { if (this.states.length > 0) { return this.states[this.states.length - 1]; diff --git a/nativescript-angular/router/page-router-outlet.ts b/nativescript-angular/router/page-router-outlet.ts index 593a2c2af..50306ccfb 100644 --- a/nativescript-angular/router/page-router-outlet.ts +++ b/nativescript-angular/router/page-router-outlet.ts @@ -280,6 +280,7 @@ export class PageRouterOutlet implements OnDestroy { // tslint:disable-line:dire return; } + this.outlet.isNSEmptyOutlet = this.isEmptyOutlet; this.locationStrategy.updateOutletFrame(this.outlet, this.frame); if (this.outlet && this.outlet.isPageNavigationBack) { diff --git a/nativescript-angular/router/router-extensions.ts b/nativescript-angular/router/router-extensions.ts index 3e582f90c..9f2379488 100644 --- a/nativescript-angular/router/router-extensions.ts +++ b/nativescript-angular/router/router-extensions.ts @@ -96,7 +96,7 @@ export class RouterExtensions { let relativeRoute = options.relativeTo || rootRoute; const relativeRouteOutlet = this.findOutletByRoute(relativeRoute); - const isNSEmptyOutlet = relativeRouteOutlet && relativeRouteOutlet.isNSEmptyOutlet(); + const isNSEmptyOutlet = relativeRouteOutlet && relativeRouteOutlet.isNSEmptyOutlet; // Lazy named outlet has added 'primary' inner NSEmptyOutlet child. // Take parent route when `relativeTo` option points to the outer named outlet. @@ -110,7 +110,7 @@ export class RouterExtensions { for (let index = 0; index < routesToMatch.length; index++) { const currentRoute = routesToMatch[index]; if (outlets.some(currentOutlet => currentOutlet === currentRoute.outlet)) { - let outlet = this.findOutletByRoute(currentRoute); + const outlet = this.findOutletByRoute(currentRoute); if (outlet) { outletsToBack.push(outlet);