diff --git a/angular/src/directives/navigation/ion-tabs.ts b/angular/src/directives/navigation/ion-tabs.ts index 20cebe0443..b5df24f7bb 100644 --- a/angular/src/directives/navigation/ion-tabs.ts +++ b/angular/src/directives/navigation/ion-tabs.ts @@ -64,6 +64,6 @@ export class IonTabs { ? href : this.outlet.getLastUrl(tab) || href; - return this.navCtrl.navigateBack(url, true); + return this.navCtrl.navigateBack(url); } } diff --git a/angular/src/directives/navigation/router-link-delegate.ts b/angular/src/directives/navigation/router-link-delegate.ts index 9a21280a1b..221c23ccbb 100644 --- a/angular/src/directives/navigation/router-link-delegate.ts +++ b/angular/src/directives/navigation/router-link-delegate.ts @@ -1,9 +1,10 @@ import { LocationStrategy } from '@angular/common'; import { Directive, ElementRef, HostListener, Input, Optional } from '@angular/core'; import { Router, RouterLink } from '@angular/router'; +import { RouterDirection } from '@ionic/core'; import { Subscription } from 'rxjs'; -import { NavController, NavDirection } from '../../providers/nav-controller'; +import { NavController } from '../../providers/nav-controller'; @Directive({ selector: '[routerLink]', @@ -12,7 +13,7 @@ export class RouterLinkDelegate { private subscription?: Subscription; - @Input() routerDirection: NavDirection = 'forward'; + @Input() routerDirection: RouterDirection = 'forward'; constructor( private locationStrategy: LocationStrategy, diff --git a/angular/src/directives/navigation/stack-controller.ts b/angular/src/directives/navigation/stack-controller.ts index e010406221..d556967e84 100644 --- a/angular/src/directives/navigation/stack-controller.ts +++ b/angular/src/directives/navigation/stack-controller.ts @@ -2,7 +2,7 @@ import { ComponentRef, NgZone } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; import { RouterDirection } from '@ionic/core'; -import { NavController, NavDirection } from '../../providers/nav-controller'; +import { NavController } from '../../providers/nav-controller'; import { RouteView, computeStackId, destroyView, getUrl, insertView, isTabSwitch, toSegments } from './stack-utils'; @@ -43,14 +43,14 @@ export class StackController { } async setActive(enteringView: RouteView) { - let { direction, animated } = this.navCtrl.consumeTransition(); + let { direction, animation } = this.navCtrl.consumeTransition(); const leavingView = this.activeView; if (isTabSwitch(enteringView, leavingView)) { direction = 'back'; - animated = false; + animation = undefined; } this.insertView(enteringView, direction); - await this.transition(enteringView, leavingView, direction, animated, this.canGoBack(1), false); + await this.transition(enteringView, leavingView, animation, this.canGoBack(1), false); this.cleanup(); } @@ -73,7 +73,6 @@ export class StackController { views[views.length - 1], // leaving view 'back', true, - true, true ); } @@ -130,8 +129,7 @@ export class StackController { private async transition( enteringView: RouteView | undefined, leavingView: RouteView | undefined, - direction: NavDirection, - animated: boolean, + direction: 'forward' | 'back' | undefined, showGoBack: boolean, progressAnimation: boolean ) { @@ -159,9 +157,9 @@ export class StackController { await containerEl.componentOnReady(); this.runningTransition = containerEl.commit(enteringEl, leavingEl, { - duration: !animated ? 0 : undefined, - direction: direction === 'forward' ? 'forward' : 'back', // TODO: refactor deepWait: true, + duration: direction === undefined ? 0 : undefined, + direction, showGoBack, progressAnimation }); diff --git a/angular/src/providers/nav-controller.ts b/angular/src/providers/nav-controller.ts index 2d1cee2a75..af8b1b4cce 100644 --- a/angular/src/providers/nav-controller.ts +++ b/angular/src/providers/nav-controller.ts @@ -1,19 +1,24 @@ import { Location } from '@angular/common'; import { Injectable, Optional } from '@angular/core'; import { NavigationExtras, NavigationStart, Router, UrlTree } from '@angular/router'; -import { RouterDirection } from '@ionic/core'; +import { NavDirection, RouterDirection } from '@ionic/core'; import { Platform } from './platform'; -export type NavDirection = 'forward' | 'back' | 'root' | 'auto'; +export interface AnimationOptions { + animated?: boolean; + animationDirection?: 'forward' | 'back'; +} + +export interface NavigationOptions extends NavigationExtras, AnimationOptions {} @Injectable() export class NavController { - private direction: NavDirection = DEFAULT_DIRECTION; - private animated = DEFAULT_ANIMATED; + private direction: 'forward' | 'back' | 'root' | 'auto' = DEFAULT_DIRECTION; + private animated?: NavDirection = DEFAULT_ANIMATED; private guessDirection: RouterDirection = 'forward'; - private guessAnimation = false; + private guessAnimation?: NavDirection; private lastNavId = -1; constructor( @@ -26,8 +31,8 @@ export class NavController { router.events.subscribe(ev => { if (ev instanceof NavigationStart) { const id = (ev.restoredState) ? ev.restoredState.navigationId : ev.id; - this.guessAnimation = !ev.restoredState; this.guessDirection = id < this.lastNavId ? 'back' : 'forward'; + this.guessAnimation = !ev.restoredState ? this.guessDirection : undefined; this.lastNavId = this.guessDirection === 'forward' ? ev.id : id; } }); @@ -37,55 +42,53 @@ export class NavController { platform.backButton.subscribeWithPriority(0, () => this.goBack()); } - navigateForward(url: string | UrlTree | any[], animated?: boolean, extras?: NavigationExtras) { - this.setDirection('forward', animated); + navigateForward(url: string | UrlTree | any[], options: NavigationOptions = {}) { + this.setDirection('forward', options.animated, options.animationDirection); if (Array.isArray(url)) { - return this.router!.navigate(url, extras); + return this.router!.navigate(url, options); } else { - return this.router!.navigateByUrl(url, extras); + return this.router!.navigateByUrl(url, options); } } - navigateBack(url: string | UrlTree | any[], animated?: boolean, extras?: NavigationExtras) { - this.setDirection('back', animated); + navigateBack(url: string | UrlTree | any[], options: NavigationOptions = {}) { + this.setDirection('back', options.animated, options.animationDirection); // extras = { replaceUrl: true, ...extras }; if (Array.isArray(url)) { - return this.router!.navigate(url, extras); + return this.router!.navigate(url, options); } else { - return this.router!.navigateByUrl(url, extras); + return this.router!.navigateByUrl(url, options); } } - navigateRoot(url: string | UrlTree | any[], animated?: boolean, extras?: NavigationExtras) { - this.setDirection('root', animated); + navigateRoot(url: string | UrlTree | any[], options: NavigationOptions = {}) { + this.setDirection('root', options.animated, options.animationDirection); if (Array.isArray(url)) { - return this.router!.navigate(url, extras); + return this.router!.navigate(url, options); } else { - return this.router!.navigateByUrl(url, extras); + return this.router!.navigateByUrl(url, options); } } - goBack(animated?: boolean) { - this.setDirection('back', animated); - return this.location.back(); + goBack(options: AnimationOptions = { animated: true, animationDirection: 'back' }) { + this.setDirection('back', options.animated, options.animationDirection); + return this.location.back(); } - setDirection(direction: NavDirection, animated?: boolean) { + setDirection(direction: RouterDirection, animated?: boolean, animationDirection?: 'forward' | 'back') { this.direction = direction; - this.animated = (animated === undefined) - ? direction !== 'root' - : animated; + this.animated = getAnimation(direction, animated, animationDirection); } consumeTransition() { let direction: RouterDirection = 'root'; - let animated = false; + let animation: NavDirection | undefined; if (this.direction === 'auto') { direction = this.guessDirection; - animated = this.guessAnimation; + animation = this.guessAnimation; } else { - animated = this.animated; + animation = this.animated; direction = this.direction; } this.direction = DEFAULT_DIRECTION; @@ -93,10 +96,23 @@ export class NavController { return { direction, - animated + animation }; } } +function getAnimation(direction: RouterDirection, animated: boolean | undefined, animationDirection: 'forward' | 'back' | undefined): NavDirection | undefined { + if (animated === false) { + return undefined; + } + if (animationDirection !== undefined) { + return animationDirection; + } + if (direction === 'forward' || direction === 'back') { + return direction; + } + return undefined; +} + const DEFAULT_DIRECTION = 'auto'; -const DEFAULT_ANIMATED = false; +const DEFAULT_ANIMATED = undefined;