diff --git a/angular/src/directives/navigation/ion-router-outlet.ts b/angular/src/directives/navigation/ion-router-outlet.ts index 178c44d03f..121ad35094 100644 --- a/angular/src/directives/navigation/ion-router-outlet.ts +++ b/angular/src/directives/navigation/ion-router-outlet.ts @@ -140,8 +140,8 @@ export class IonRouterOutlet implements OnDestroy, OnInit { enteringView = this.stackCtrl.createView(this.activated, activatedRoute); } - const direction = this.navCtrl.consumeDirection(); - await this.stackCtrl.setActive(enteringView, direction); + const {direction, animated} = this.navCtrl.consumeTransition(); + await this.stackCtrl.setActive(enteringView, direction, animated); this.activateEvents.emit(this.activated.instance); emitEvent(this.elementRef.nativeElement); diff --git a/angular/src/directives/navigation/router-controller.ts b/angular/src/directives/navigation/router-controller.ts index dc0766292f..b71b7ede97 100644 --- a/angular/src/directives/navigation/router-controller.ts +++ b/angular/src/directives/navigation/router-controller.ts @@ -35,12 +35,10 @@ export class StackController { return this.views.length > deep; } - async setActive(enteringView: RouteView, direction: number | undefined) { + async setActive(enteringView: RouteView, direction: number, animated: boolean) { const leavingView = this.getActive(); - const forcedGoBack = direction === -1; - const reused = this.insertView(enteringView, forcedGoBack); - direction = direction != null ? direction : (reused ? -1 : 1); - await this.transition(enteringView, leavingView, direction, this.canGoBack(1)); + this.insertView(enteringView, direction); + await this.transition(enteringView, leavingView, direction, animated, this.canGoBack(1)); this.cleanup(); } @@ -50,23 +48,29 @@ export class StackController { this.navCtrl.goBack(view.url); } - private insertView(enteringView: RouteView, forcedGoBack: boolean): boolean { - if (this.stack) { - const index = this.views.indexOf(enteringView); - if (index >= 0) { - this.views = this.views.slice(0, index + 1); - return true; - } else { - if (forcedGoBack) { - this.views = [enteringView]; - } else { - this.views.push(enteringView); - } - return false; - } - } else { + private insertView(enteringView: RouteView, direction: number) { + // no stack + if (!this.stack) { this.views = [enteringView]; - return false; + return; + } + + // stack setRoot + if (direction === 0) { + this.views = [enteringView]; + return; + } + + // stack + const index = this.views.indexOf(enteringView); + if (index >= 0) { + this.views = this.views.slice(0, index + 1); + } else { + if (direction === 1) { + this.views.push(enteringView); + } else { + this.views = [enteringView]; + } } } @@ -85,7 +89,13 @@ export class StackController { return this.views.length > 0 ? this.views[this.views.length - 1] : null; } - private async transition(enteringView: RouteView, leavingView: RouteView, direction: number, showGoBack: boolean) { + private async transition( + enteringView: RouteView, + leavingView: RouteView, + direction: number, + animated: boolean, + showGoBack: boolean + ) { const enteringEl = enteringView ? enteringView.element : undefined; const leavingEl = leavingView ? leavingView.element : undefined; const containerEl = this.containerEl; @@ -95,8 +105,8 @@ export class StackController { await containerEl.componentOnReady(); await containerEl.commit(enteringEl, leavingEl, { - duration: direction === 0 ? 0 : undefined, - direction: direction === -1 ? NavDirection.Back : NavDirection.Forward, + duration: !animated ? 0 : undefined, + direction: direction === 1 ? NavDirection.Forward : NavDirection.Back, deepWait: true, showGoBack }); diff --git a/angular/src/providers/nav-controller.ts b/angular/src/providers/nav-controller.ts index 6613bdd4b3..f73c806c4f 100644 --- a/angular/src/providers/nav-controller.ts +++ b/angular/src/providers/nav-controller.ts @@ -11,56 +11,75 @@ export const enum NavIntent { @Injectable() export class NavController { - private direction = 0; private intent: NavIntent = NavIntent.Auto; + private animated = true; private stack: string[] = []; constructor( @Optional() private router?: Router ) {} - goForward(url: string | UrlTree, extras?: NavigationExtras) { - this.intent = NavIntent.Forward; + goForward(url: string | UrlTree, animated?: boolean, extras?: NavigationExtras) { + this.setIntent(NavIntent.Forward, animated); return this.router.navigateByUrl(url, extras); } - goBack(url: string | UrlTree, extras?: NavigationExtras) { - this.intent = NavIntent.Back; + goBack(url: string | UrlTree, animated?: boolean, extras?: NavigationExtras) { + this.setIntent(NavIntent.Back, animated); return this.router.navigateByUrl(url, extras); } - goRoot(url: string | UrlTree, extras?: NavigationExtras) { - this.intent = NavIntent.Root; + goRoot(url: string | UrlTree, animated?: boolean, extras?: NavigationExtras) { + this.setIntent(NavIntent.Root, animated); return this.router.navigateByUrl(url, extras); } - setIntent(intent: NavIntent) { + setIntent(intent: NavIntent, animated?: boolean) { this.intent = intent; + this.animated = (animated === undefined) + ? intent !== NavIntent.Root + : animated; } - consumeDirection() { - if (this.direction === 0) { - const index = this.stack.indexOf(document.location.href); - if (index === -1) { - this.stack.push(document.location.href); - this.direction = 1; - } else if (index < this.stack.length - 1) { - this.stack = this.stack.slice(0, index + 1); - this.direction = -1; - } + consumeTransition() { + const guessDirection = this.guessDirection(); + + let direction = 0; + let animated = false; + + if (this.intent === NavIntent.Auto) { + direction = guessDirection; + animated = direction !== 0; + } else { + animated = this.animated; + direction = intentToDirection(this.intent); } - - const direction = directionForIntent(this.intent, this.direction); - this.intent = NavIntent.Auto; - this.direction = 0; - return direction; + this.animated = true; + + return { + direction, + animated + }; + } + + private guessDirection() { + const index = this.stack.indexOf(document.location.href); + if (index === -1) { + this.stack.push(document.location.href); + return 1; + } else if (index < this.stack.length - 1) { + this.stack = this.stack.slice(0, index + 1); + return -1; + } + return 0; } } -function directionForIntent(intent: NavIntent, nav: number): number { - if (intent === NavIntent.Auto) { - return nav; +function intentToDirection(intent: NavIntent): number { + switch (intent) { + case NavIntent.Forward: return 1; + case NavIntent.Back: return -1; + default: return 0; } - return intent === NavIntent.Back ? -1 : 1; }