diff --git a/nativescript-angular/router/ns-location-strategy.ts b/nativescript-angular/router/ns-location-strategy.ts index 3798731b1..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; 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 0943f8acb..9f2379488 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); + const 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; + } }