fix(location-strategy): extend support for nested primary outlets

Author: ADjenkov

Diff for: nativescript-angular/router/ns-location-strategy.ts

@@ -1,6 +1,6 @@
 import { Injectable } from "@angular/core";
 import { LocationStrategy } from "@angular/common";
-import { DefaultUrlSerializer, UrlSegmentGroup, UrlTree } from "@angular/router";
+import { DefaultUrlSerializer, UrlSegmentGroup, UrlTree, ActivatedRouteSnapshot } from "@angular/router";
 import { routerLog, routerError, isLogEnabled } from "../trace";
 import { NavigationTransition, Frame } from "tns-core-modules/ui/frame";
 import { isPresent } from "../lang-facade";
@@ -88,6 +88,7 @@ export interface LocationState {
     segmentGroup: UrlSegmentGroup;
     isRootSegmentGroup: boolean;
     isPageNavigation: boolean;
+    frame?: Frame;
 }
 
 @Injectable()
@@ -162,7 +163,7 @@ export class NSLocationStrategy extends LocationStrategy {
         if (!Object.keys(urlTreeRoot.children).length) {
             const segmentGroup = this.currentUrlTree && this.currentUrlTree.root;
             const outletKey = this.getOutletKey(this.getSegmentGroupFullPath(segmentGroup), "primary");
-            const outlet = this.findOutletByKey(outletKey);
+            const outlet = this.findOutlet(outletKey);
 
             if (outlet && this.updateStates(outlet, segmentGroup)) {
                 this.currentOutlet = outlet; // If states updated
@@ -186,12 +187,12 @@ export class NSLocationStrategy extends LocationStrategy {
 
                 const outletPath = this.getSegmentGroupFullPath(currentTree);
                 let outletKey = this.getOutletKey(outletPath, outletName);
-                let outlet = this.findOutletByKey(outletKey);
+                let outlet = this.findOutlet(outletKey);
 
                 const parentOutletName = currentTree.outlet || "";
                 const parentOutletPath = this.getSegmentGroupFullPath(currentTree.parent);
                 const parentOutletKey = this.getOutletKey(parentOutletPath, parentOutletName);
-                const parentOutlet = this.findOutletByKey(parentOutletKey);
+                const parentOutlet = this.findOutlet(parentOutletKey);
 
                 const containsLastState = outlet && outlet.containsTopState(currentSegmentGroup.toString());
                 if (!outlet) {
@@ -237,7 +238,7 @@ export class NSLocationStrategy extends LocationStrategy {
         throw new Error("NSLocationStrategy.forward() - not implemented");
     }
 
-    back(outlet?: Outlet): void {
+    back(outlet?: Outlet, frame?: Frame): void {
         this.currentOutlet = outlet || this.currentOutlet;
 
         if (this.currentOutlet.isPageNavigationBack) {
@@ -247,6 +248,13 @@ export class NSLocationStrategy extends LocationStrategy {
             let state = states.pop();
             let count = 1;
 
+            if (frame) {
+                while (state.frame !== frame) {
+                    state = states.pop();
+                    count++;
+                }
+            }
+
             while (!state.isPageNavigation) {
                 state = states.pop();
                 count++;
@@ -447,9 +455,15 @@ export class NSLocationStrategy extends LocationStrategy {
         return this.outlets;
     }
 
-    updateOutletFrame(outlet: Outlet, frame: Frame) {
+    updateOutletFrame(outlet: Outlet, frame: Frame, isEmptyOutletFrame: boolean) {
+        const lastState = outlet.peekState();
+
+        if (lastState && !lastState.frame && !isEmptyOutletFrame) {
+            lastState.frame = frame;
+        }
+
         if (!outlet.containsFrame(frame)) {
-            outlet.frames.push(frame);
+                        outlet.frames.push(frame);
         }
         this.currentOutlet = outlet;
     }
@@ -547,12 +561,17 @@ export class NSLocationStrategy extends LocationStrategy {
         });
     }
 
-    findOutletByOutletPath(pathByOutlets: string): Outlet {
-        return this.outlets.find((outlet) => outlet.pathByOutlets === pathByOutlets);
-    }
+    findOutlet(outletKey: string, activatedRouteSnapshot?: ActivatedRouteSnapshot): Outlet {
+        let outlet: Outlet = this.outlets.find((currentOutlet) => currentOutlet.outletKeys.indexOf(outletKey) > -1);
 
-    findOutletByKey(outletKey: string): Outlet {
-        return this.outlets.find((outlet) => outlet.outletKeys.indexOf(outletKey) > -1);
+        // No Outlet with the given outletKey could happen when using nested unnamed p-r-o
+        // primary -> primary -> prymary
+        if (!outlet && activatedRouteSnapshot) {
+            const pathByOutlets = this.getPathByOutlets(activatedRouteSnapshot);
+            outlet = this.outlets.find((currentOutlet) => currentOutlet.pathByOutlets === pathByOutlets);
+        }
+
+        return outlet;
     }
 
     private getOutletByFrame(frame: Frame): Outlet {

Diff for: nativescript-angular/router/ns-route-reuse-strategy.ts

@@ -100,7 +100,7 @@ export class NSRouteReuseStrategy implements RouteReuseStrategy {
         route = findTopActivatedRouteNodeForOutlet(route);
 
         const outletKey = this.location.getRouteFullPath(route);
-        const outlet = this.location.findOutletByKey(outletKey);
+        const outlet = this.location.findOutlet(outletKey, route);
         const key = getSnapshotKey(route);
         const isPageActivated = route[pageRouterActivatedSymbol];
         const isBack = outlet ? outlet.isPageNavigationBack : false;
@@ -125,7 +125,7 @@ export class NSRouteReuseStrategy implements RouteReuseStrategy {
         route = findTopActivatedRouteNodeForOutlet(route);
 
         const outletKey = this.location.getRouteFullPath(route);
-        const outlet = this.location.findOutletByKey(outletKey);
+        const outlet = this.location.findOutlet(outletKey, route);
         const cache = this.cacheByOutlet[outletKey];
         if (!cache) {
             return false;
@@ -185,7 +185,7 @@ export class NSRouteReuseStrategy implements RouteReuseStrategy {
         route = findTopActivatedRouteNodeForOutlet(route);
 
         const outletKey = this.location.getRouteFullPath(route);
-        const outlet = this.location.findOutletByKey(outletKey);
+        const outlet = this.location.findOutlet(outletKey, route);
         const cache = this.cacheByOutlet[outletKey];
         if (!cache) {
             return null;

Diff for: nativescript-angular/router/page-router-outlet.ts

@@ -287,7 +287,7 @@ export class PageRouterOutlet implements OnDestroy { // tslint:disable-line:dire
         }
 
         this.outlet.isNSEmptyOutlet = this.isEmptyOutlet;
-        this.locationStrategy.updateOutletFrame(this.outlet, this.frame);
+        this.locationStrategy.updateOutletFrame(this.outlet, this.frame, this.isEmptyOutlet);
 
         if (this.outlet && this.outlet.isPageNavigationBack) {
             if (isLogEnabled()) {
@@ -355,7 +355,7 @@ export class PageRouterOutlet implements OnDestroy { // tslint:disable-line:dire
         page.on(Page.navigatedFromEvent, (<any>global).Zone.current.wrap((args: NavigatedData) => {
             if (args.isBackNavigation) {
                 this.locationStrategy._beginBackPageNavigation(this.frame);
-                this.locationStrategy.back();
+                this.locationStrategy.back(null, this.frame);
             }
         }));
 
@@ -394,14 +394,14 @@ export class PageRouterOutlet implements OnDestroy { // tslint:disable-line:dire
                 queue.push(childRoute);
             });
 
-            const nodeToMark = findTopActivatedRouteNodeForOutlet(currentRoute);
-            let outletKeyForRoute = this.locationStrategy.getRouteFullPath(nodeToMark);
-            let outlet = this.locationStrategy.findOutletByKey(outletKeyForRoute);
+            const topActivatedRoute = findTopActivatedRouteNodeForOutlet(currentRoute);
+            let outletKey = this.locationStrategy.getRouteFullPath(topActivatedRoute);
+            let outlet = this.locationStrategy.findOutlet(outletKey, topActivatedRoute);
 
             if (outlet && outlet.frames.length) {
-                nodeToMark[pageRouterActivatedSymbol] = true;
+                topActivatedRoute[pageRouterActivatedSymbol] = true;
                 if (isLogEnabled()) {
-                    log("Activated route marked as page: " + routeToString(nodeToMark));
+                    log("Activated route marked as page: " + routeToString(topActivatedRoute));
                 }
             }
 
@@ -429,20 +429,17 @@ export class PageRouterOutlet implements OnDestroy { // tslint:disable-line:dire
         if (modalNavigation > 0) { // Modal with 'primary' p-r-o
             outlet = this.locationStrategy.findOutletByModal(modalNavigation);
         } else {
-            outlet = this.locationStrategy.findOutletByKey(outletKey);
+            outlet = this.locationStrategy.findOutlet(outletKey, topActivatedRoute);
         }
 
         // Named lazy loaded outlet.
         if (!outlet && this.isEmptyOutlet) {
             const parentOutletKey = this.locationStrategy.getRouteFullPath(topActivatedRoute.parent);
-            outlet = this.locationStrategy.findOutletByKey(parentOutletKey);
+            outlet = this.locationStrategy.findOutlet(parentOutletKey, topActivatedRoute.parent);
 
             if (outlet) {
                 outlet.outletKeys.push(outletKey);
             }
-        } else if (!outlet) {
-            const pathByOutlets = this.locationStrategy.getPathByOutlets(topActivatedRoute);
-            outlet = this.locationStrategy.findOutletByOutletPath(pathByOutlets);
         }
 
         return outlet;

Diff for: nativescript-angular/router/router-extensions.ts

@@ -126,7 +126,7 @@ export class RouterExtensions {
 
         const currentRouteSnapshop = findTopActivatedRouteNodeForOutlet(currentRoute.snapshot);
         const outletKey = this.locationStrategy.getRouteFullPath(currentRouteSnapshop);
-        outlet = this.locationStrategy.findOutletByKey(outletKey);
+        outlet = this.locationStrategy.findOutlet(outletKey, currentRouteSnapshop);
 
         return outlet;
     }