feat(location-strategy): introduce path property to Outlet. Match the path to Outlet when search in the UrlTree for the given Outlet

Author: ADjenkov

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

@@ -15,18 +15,24 @@ export class Outlet {
     // More than one key available when using NSEmptyOutletComponent component
     // in module that lazy loads children (loadChildren) and has outlet name.
     outletKeys: Array<string>;
+
+    // The url path to the Outlet.
+    // E.G: the path to Outlet3 that is nested Outlet1(home)->Outlet2(nested1)->Outlet3(nested2)
+    // will be 'home/nested1'
+    path: string;
     pathByOutlets: string;
     states: Array<LocationState> = [];
     frame: Frame;
 
     // Used in reuse-strategy by its children to determine if they should be detached too.
     shouldDetach: boolean = true;
-    constructor(outletKey: string, pathByOutlets: string, modalNavigationDepth?: number) {
+    constructor(outletKey: string, path: string, pathByOutlets: string, modalNavigationDepth?: number) {
         this.outletKeys = [outletKey];
         this.isPageNavigationBack = false;
         this.showingModal = false;
         this.modalNavigationDepth = modalNavigationDepth || 0;
         this.pathByOutlets = pathByOutlets;
+        this.path = path;
     }
 
     peekState(): LocationState {
@@ -88,7 +94,7 @@ export class NSLocationStrategy extends LocationStrategy {
         }
 
         let tree = this.currentUrlTree;
-        let changedOutlet = this.getSegmentGroup(this.currentOutlet.pathByOutlets);
+        let changedOutlet = this.getSegmentGroupByOutlet(this.currentOutlet);
 
         // Handle case where the user declares a component at path "/".
         // The url serializer doesn't parse this url as having a primary outlet.
@@ -130,13 +136,13 @@ export class NSLocationStrategy extends LocationStrategy {
         // The url serializer doesn't parse this url as having a primary outlet.
         if (!Object.keys(urlTreeRoot.children).length) {
             const segmentGroup = this.currentUrlTree && this.currentUrlTree.root;
-            const outletKey = this.getSegmentGroupFullPath(segmentGroup) + "primary";
+            const outletKey = this.getOutletKey(this.getSegmentGroupFullPath(segmentGroup), "primary");
             const outlet = this.findOutletByKey(outletKey);
 
             if (outlet && this.updateStates(outlet, segmentGroup)) {
                 this.currentOutlet = outlet; // If states updated
             } else if (!outlet) {
-                const rootOutlet = this.createOutlet("primary", segmentGroup, null);
+                const rootOutlet = this.createOutlet("primary", null, segmentGroup, null);
                 this.currentOutlet = rootOutlet;
             }
 
@@ -153,16 +159,19 @@ export class NSLocationStrategy extends LocationStrategy {
                 currentSegmentGroup.outlet = outletName;
                 currentSegmentGroup.root = urlTreeRoot;
 
-                let outletKey = this.getSegmentGroupFullPath(currentTree) + outletName;
+                const outletPath = this.getSegmentGroupFullPath(currentTree);
+                let outletKey = this.getOutletKey(outletPath, outletName);
                 let outlet = this.findOutletByKey(outletKey);
+
                 const parentOutletName = currentTree.outlet || "";
-                const parentOutletKey = this.getSegmentGroupFullPath(currentTree.parent) + parentOutletName;
+                const parentOutletPath = this.getSegmentGroupFullPath(currentTree.parent);
+                const parentOutletKey = this.getOutletKey(parentOutletPath, parentOutletName);
                 const parentOutlet = this.findOutletByKey(parentOutletKey);
 
                 const containsLastState = outlet && outlet.containsTopState(currentSegmentGroup.toString());
                 if (!outlet) {
                     // tslint:disable-next-line:max-line-length
-                    outlet = this.createOutlet(outletKey, currentSegmentGroup, parentOutlet, this._modalNavigationDepth);
+                    outlet = this.createOutlet(outletKey, outletPath, currentSegmentGroup, parentOutlet, this._modalNavigationDepth);
                     this.currentOutlet = outlet;
                 } else if (this._modalNavigationDepth > 0 && outlet.showingModal && !containsLastState) {
                     // Navigation inside modal view.
@@ -270,7 +279,7 @@ export class NSLocationStrategy extends LocationStrategy {
     private callPopState(state: LocationState, pop: boolean = true, outlet?: Outlet) {
         outlet = outlet || this.currentOutlet;
         const urlSerializer = new DefaultUrlSerializer();
-        let changedOutlet = this.getSegmentGroup(outlet.pathByOutlets);
+        let changedOutlet = this.getSegmentGroupByOutlet(outlet);
 
         if (state && changedOutlet) {
             this.updateSegmentGroup(this.currentUrlTree.root, changedOutlet, state.segmentGroup);
@@ -469,7 +478,7 @@ export class NSLocationStrategy extends LocationStrategy {
             currentRoute = currentRoute.parent;
         }
 
-        return fullPath ? fullPath + outletName : outletName;
+        return fullPath ? fullPath + "-" + outletName : outletName;
     }
 
 
@@ -568,9 +577,10 @@ export class NSLocationStrategy extends LocationStrategy {
         }
     }
 
-    private createOutlet(outletKey: string, segmentGroup: any, parent: Outlet, modalNavigation?: number): Outlet {
+    // tslint:disable-next-line:max-line-length
+    private createOutlet(outletKey: string, path: string, segmentGroup: any, parent: Outlet, modalNavigation?: number): Outlet {
         const pathByOutlets = this.getPathByOutlets(segmentGroup);
-        const newOutlet = new Outlet(outletKey, pathByOutlets, modalNavigation);
+        const newOutlet = new Outlet(outletKey, path, pathByOutlets, modalNavigation);
 
         const locationState: LocationState = {
             segmentGroup: segmentGroup,
@@ -590,15 +600,18 @@ export class NSLocationStrategy extends LocationStrategy {
         return newOutlet;
     }
 
-    private getSegmentGroup(pathByOutlets: string): UrlSegmentGroup {
-        const pathList = pathByOutlets.split("-");
+    private getSegmentGroupByOutlet(outlet: Outlet): UrlSegmentGroup {
+        const pathList = outlet.pathByOutlets.split("-");
         let segmentGroup = this.currentUrlTree.root;
+        let pathToOutlet;
 
         for (let index = 0; index < pathList.length; index++) {
             const currentPath = pathList[index];
             const childrenCount = Object.keys(segmentGroup.children).length;
 
             if (childrenCount && segmentGroup.children[currentPath]) {
+                const url = segmentGroup.toString();
+                pathToOutlet = pathToOutlet ? pathToOutlet + "/" + url : url;
                 segmentGroup = segmentGroup.children[currentPath];
             } else {
                 // If no child outlet found with the given name - forget about all previously found outlets.
@@ -609,6 +622,12 @@ export class NSLocationStrategy extends LocationStrategy {
             }
         }
 
+        // Paths should also match since there could be another Outlet
+        // with the same pathByOutlets but different url path.
+        if (segmentGroup && outlet.path && pathToOutlet && outlet.path !== pathToOutlet) {
+            segmentGroup = null;
+        }
+
         return segmentGroup;
     }
 
@@ -645,11 +664,17 @@ export class NSLocationStrategy extends LocationStrategy {
 
             // No currentModalOutlet available when opening 'primary' p-r-o.
             const outletName = "primary";
-            const outletKey = parentOutlet.peekState().segmentGroup.toString() + outletName;
-            currentModalOutlet = this.createOutlet(outletKey, segmentedGroup, parentOutlet, this._modalNavigationDepth);
+            const outletPath = parentOutlet.peekState().segmentGroup.toString();
+            const outletKey = this.getOutletKey(outletPath, outletName);
+            // tslint:disable-next-line:max-line-length
+            currentModalOutlet = this.createOutlet(outletKey, outletPath, segmentedGroup, parentOutlet, this._modalNavigationDepth);
             this.currentOutlet = currentModalOutlet;
         } else if (this.updateStates(currentModalOutlet, segmentedGroup)) {
             this.currentOutlet = currentModalOutlet; // If states updated
         }
     }
+
+    private getOutletKey(path: string, outletName: string): string {
+        return path ? path + "-" + outletName : outletName;
+    }
 }

Diff for: tests/app/tests/modal-dialog.ts

@@ -93,7 +93,7 @@ describe("modal-dialog", () => {
             .then((fixture: ComponentFixture<SuccessComponent>) => {
                 const service = <ModalDialogService>fixture.componentRef.instance.service;
                 const locStrategy = <NSLocationStrategy>fixture.componentRef.instance.locationStrategy;
-                const outlet = new Outlet("primary", "primary", 0);
+                const outlet = new Outlet("primary", null, "primary", 0);
 
                 let parentView = fixture.componentRef.instance.vcRef.element.nativeElement;
                 parentView = parentView.page && parentView.page.frame;
@@ -115,7 +115,7 @@ describe("modal-dialog", () => {
             .then((fixture: ComponentFixture<SuccessComponent>) => {
                 const service = <ModalDialogService>fixture.componentRef.instance.service;
                 const locStrategy = <NSLocationStrategy>fixture.componentRef.instance.locationStrategy;
-                const outlet = new Outlet("primary", "primary", 0);
+                const outlet = new Outlet("primary", null, "primary", 0);
 
                 let parentView = fixture.componentRef.instance.vcRef.element.nativeElement;
                 parentView = parentView.page && parentView.page.frame;