From fbd4960cb506248be37be9668c8a3e522b254eb3 Mon Sep 17 00:00:00 2001 From: ADjenkov Date: Mon, 3 Dec 2018 12:50:02 +0200 Subject: [PATCH 1/3] fix(router): handle nested primary p-r-o --- .../router/ns-location-strategy.ts | 26 ++++++++++++++++++- .../router/page-router-outlet.ts | 2 ++ 2 files changed, 27 insertions(+), 1 deletion(-) diff --git a/nativescript-angular/router/ns-location-strategy.ts b/nativescript-angular/router/ns-location-strategy.ts index 1c621a87e..327a09c41 100644 --- a/nativescript-angular/router/ns-location-strategy.ts +++ b/nativescript-angular/router/ns-location-strategy.ts @@ -53,6 +53,24 @@ export class Outlet { const lastState = this.peekState(); return lastState && lastState.segmentGroup.toString() === stateUrl; } + + // Search for frame that can go back. + // Nested 'primary' outlets could result in Outlet with multiple navigatable frames. + getFrameToBack(): Frame { + let frame = this.frames[this.frames.length - 1]; + + if (!this.isNSEmptyOutlet) { + for (let index = this.frames.length - 1; index >= 0; index--) { + const currentFrame = this.frames[index]; + if (currentFrame.canGoBack()) { + frame = currentFrame; + break; + } + } + + return frame; + } + } } export interface NavigationOptions { @@ -251,7 +269,7 @@ export class NSLocationStrategy extends LocationStrategy { const topmostFrame = this.frameService.getFrame(); this.currentOutlet = this.getOutletByFrame(topmostFrame); } - this.currentOutlet.frames[this.currentOutlet.frames.length - 1].goBack(); + this.currentOutlet.getFrameToBack().goBack(); } else { // Nested navigation - just pop the state if (isLogEnabled()) { @@ -448,6 +466,12 @@ export class NSLocationStrategy extends LocationStrategy { if (currentOutlet.containsFrame(frame) && !isEqualToCurrent) { this.callPopState(null, true, currentOutlet); } + + if (!currentOutlet.isNSEmptyOutlet) { + currentOutlet.frames = currentOutlet.frames.filter(currentFrame => currentFrame !== frame); + return currentOutlet.frames.length; + } + return !currentOutlet.containsFrame(frame); }); } diff --git a/nativescript-angular/router/page-router-outlet.ts b/nativescript-angular/router/page-router-outlet.ts index 50306ccfb..65e353ceb 100644 --- a/nativescript-angular/router/page-router-outlet.ts +++ b/nativescript-angular/router/page-router-outlet.ts @@ -423,7 +423,9 @@ export class PageRouterOutlet implements OnDestroy { // tslint:disable-line:dire if (modalNavigation > 0) { // Modal with 'primary' p-r-o outlet = this.locationStrategy.findOutletByModal(modalNavigation); } else { + const pathByOutlets = this.locationStrategy.getPathByOutlets(topActivatedRoute); outlet = this.locationStrategy.findOutletByKey(outletKey); + outlet = outlet || this.locationStrategy.findOutletByOutletPath(pathByOutlets); } // Named lazy loaded outlet. From b9364eb63ca8c32cb8dddba2284e727f29ab15d4 Mon Sep 17 00:00:00 2001 From: ADjenkov Date: Mon, 3 Dec 2018 12:51:09 +0200 Subject: [PATCH 2/3] tests(e2e): test nested primary p-r-o navigation --- .../app/about/about-nested.component.html | 3 +++ .../app/about/about-nested.component.ts | 9 +++++++++ .../app/about/about.component.html | 3 +++ .../app/about/about.component.ts | 5 +---- e2e/nested-router-tab-view/app/app.component.html | 14 +------------- e2e/nested-router-tab-view/app/app.routing.ts | 7 ++++++- .../app/home/home.component.html | 1 - e2e/nested-router-tab-view/app/shared.module.ts | 3 +++ .../app/tabs/tabs.component.html | 2 +- .../e2e/home-tabs.e2e-spec.ts | 1 + e2e/nested-router-tab-view/e2e/screen.ts | 9 ++++++++- 11 files changed, 36 insertions(+), 21 deletions(-) create mode 100644 e2e/nested-router-tab-view/app/about/about-nested.component.html create mode 100644 e2e/nested-router-tab-view/app/about/about-nested.component.ts diff --git a/e2e/nested-router-tab-view/app/about/about-nested.component.html b/e2e/nested-router-tab-view/app/about/about-nested.component.html new file mode 100644 index 000000000..0e39308c8 --- /dev/null +++ b/e2e/nested-router-tab-view/app/about/about-nested.component.html @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/e2e/nested-router-tab-view/app/about/about-nested.component.ts b/e2e/nested-router-tab-view/app/about/about-nested.component.ts new file mode 100644 index 000000000..ff1197b7e --- /dev/null +++ b/e2e/nested-router-tab-view/app/about/about-nested.component.ts @@ -0,0 +1,9 @@ +import { Component } from "@angular/core"; + +@Component({ + moduleId: module.id, + selector: "about-nested-page", + templateUrl: "./about-nested.component.html" +}) +export class AboutNestedComponent { +} diff --git a/e2e/nested-router-tab-view/app/about/about.component.html b/e2e/nested-router-tab-view/app/about/about.component.html index 92f893d2d..9f9ae3731 100644 --- a/e2e/nested-router-tab-view/app/about/about.component.html +++ b/e2e/nested-router-tab-view/app/about/about.component.html @@ -4,4 +4,7 @@ + + + \ No newline at end of file diff --git a/e2e/nested-router-tab-view/app/about/about.component.ts b/e2e/nested-router-tab-view/app/about/about.component.ts index 2d8eed10c..75eb5b55e 100644 --- a/e2e/nested-router-tab-view/app/about/about.component.ts +++ b/e2e/nested-router-tab-view/app/about/about.component.ts @@ -1,5 +1,4 @@ -import { Component, ViewContainerRef } from "@angular/core"; -import { ModalDialogService, ModalDialogOptions } from "nativescript-angular/directives/dialogs"; +import { Component } from "@angular/core"; import { RouterExtensions } from "nativescript-angular/router"; import { ActivatedRoute } from "@angular/router"; @@ -10,8 +9,6 @@ import { ActivatedRoute } from "@angular/router"; }) export class AboutComponent { constructor( - private modal: ModalDialogService, - private vcRef: ViewContainerRef, private activeRoute: ActivatedRoute, private routerExtension: RouterExtensions) { } diff --git a/e2e/nested-router-tab-view/app/app.component.html b/e2e/nested-router-tab-view/app/app.component.html index 5aeb4e2b0..1265aa9c8 100644 --- a/e2e/nested-router-tab-view/app/app.component.html +++ b/e2e/nested-router-tab-view/app/app.component.html @@ -1,13 +1 @@ - - - \ No newline at end of file + \ No newline at end of file diff --git a/e2e/nested-router-tab-view/app/app.routing.ts b/e2e/nested-router-tab-view/app/app.routing.ts index e7b630902..276f26d91 100644 --- a/e2e/nested-router-tab-view/app/app.routing.ts +++ b/e2e/nested-router-tab-view/app/app.routing.ts @@ -10,6 +10,7 @@ import { LoginComponent } from "./login/login.component"; import { TabsComponent } from "./tabs/tabs.component"; import { HomeComponent } from "./home/home.component"; import { AboutComponent } from "./about/about.component"; +import { AboutNestedComponent } from "./about/about-nested.component"; import { ModalComponent } from "./modal/modal.component"; import { NestedModalComponent } from "./modal-nested/modal-nested.component"; @@ -56,7 +57,11 @@ const routes: Routes = [ { path: "team/:id", component: TeamDetailComponent, outlet: "teamTab" }, ] }, - { path: "about", component: AboutComponent } + { + path: "about", component: AboutComponent, children: [ + { path: "about-nested", component: AboutNestedComponent }, + ] + } ]; @NgModule({ diff --git a/e2e/nested-router-tab-view/app/home/home.component.html b/e2e/nested-router-tab-view/app/home/home.component.html index 6779e7468..bfd588cb0 100644 --- a/e2e/nested-router-tab-view/app/home/home.component.html +++ b/e2e/nested-router-tab-view/app/home/home.component.html @@ -28,7 +28,6 @@ - diff --git a/e2e/nested-router-tab-view/app/shared.module.ts b/e2e/nested-router-tab-view/app/shared.module.ts index 5f60aaaf3..be7d8a867 100644 --- a/e2e/nested-router-tab-view/app/shared.module.ts +++ b/e2e/nested-router-tab-view/app/shared.module.ts @@ -8,6 +8,7 @@ import { DataService } from "./data.service"; import { HomeComponent } from "./home/home.component"; import { AboutComponent } from "./about/about.component"; +import { AboutNestedComponent } from "./about/about-nested.component"; import { PlayerComponent } from "./player/players.component"; import { PlayerDetailComponent } from "./player/player-detail.component"; import { TeamsComponent } from "./team/teams.component"; @@ -21,6 +22,7 @@ import { TeamDetailComponent } from "./team/team-detail.component"; declarations: [ HomeComponent, AboutComponent, + AboutNestedComponent, PlayerComponent, PlayerDetailComponent, TeamsComponent, @@ -29,6 +31,7 @@ import { TeamDetailComponent } from "./team/team-detail.component"; exports: [ HomeComponent, AboutComponent, + AboutNestedComponent, PlayerComponent, PlayerDetailComponent, TeamsComponent, diff --git a/e2e/nested-router-tab-view/app/tabs/tabs.component.html b/e2e/nested-router-tab-view/app/tabs/tabs.component.html index 0542dbc71..4e1ddec84 100644 --- a/e2e/nested-router-tab-view/app/tabs/tabs.component.html +++ b/e2e/nested-router-tab-view/app/tabs/tabs.component.html @@ -3,7 +3,7 @@ - + diff --git a/e2e/nested-router-tab-view/e2e/home-tabs.e2e-spec.ts b/e2e/nested-router-tab-view/e2e/home-tabs.e2e-spec.ts index da759348c..af4d6e65e 100644 --- a/e2e/nested-router-tab-view/e2e/home-tabs.e2e-spec.ts +++ b/e2e/nested-router-tab-view/e2e/home-tabs.e2e-spec.ts @@ -48,6 +48,7 @@ describe("home-tabs:", () => { await screen.loadedPlayersList(); await screen.navigateToAboutPage(); await screen.loadedAbout(); + await screen.loadedNestedAbout(); }); it("should go back to Tabs and then back to Home", async () => { diff --git a/e2e/nested-router-tab-view/e2e/screen.ts b/e2e/nested-router-tab-view/e2e/screen.ts index 53eefdd20..870fdf9bf 100644 --- a/e2e/nested-router-tab-view/e2e/screen.ts +++ b/e2e/nested-router-tab-view/e2e/screen.ts @@ -3,6 +3,7 @@ import { assert } from "chai"; const home = "Home Component"; const about = "About Component"; +const aboutNested = "Nested About Component"; const login = "Login Component"; const tabs = "Tabs Component"; @@ -70,7 +71,13 @@ export class Screen { loadedAbout= async () => { const lblAbout = await this._driver.findElementByAutomationText(about); assert.isTrue(await lblAbout.isDisplayed()); - console.log(home + " loaded!"); + console.log(about + " loaded!"); + } + + loadedNestedAbout= async () => { + const lblAboutNested = await this._driver.findElementByAutomationText(aboutNested); + assert.isTrue(await lblAboutNested.isDisplayed()); + console.log(aboutNested + " loaded!"); } loadedTabs = async () => { From 5b7ec9224d60c71b73619a127a4162885ca1aeb0 Mon Sep 17 00:00:00 2001 From: ADjenkov Date: Tue, 4 Dec 2018 08:57:31 +0200 Subject: [PATCH 3/3] chore: fix getFrameToBack return displacement --- nativescript-angular/router/ns-location-strategy.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/nativescript-angular/router/ns-location-strategy.ts b/nativescript-angular/router/ns-location-strategy.ts index 327a09c41..fa6b1c488 100644 --- a/nativescript-angular/router/ns-location-strategy.ts +++ b/nativescript-angular/router/ns-location-strategy.ts @@ -67,9 +67,9 @@ export class Outlet { break; } } - - return frame; } + + return frame; } }