diff --git a/core/src/components.d.ts b/core/src/components.d.ts index f1f37fdc76..87ba599b1f 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -95,6 +95,7 @@ import { } from './components/nav/view-controller'; import { RouteID, + RouterDirection, RouterEventDetail, RouteWrite, } from './components/router/utils/interfaces'; @@ -3502,7 +3503,6 @@ declare global { 'canGoBack': (view?: ViewController) => boolean; 'delegate': FrameworkDelegate; 'getActive': () => ViewController; - 'getAllChildNavs': () => any[]; 'getByIndex': (index: number) => ViewController; 'getPrevious': (view?: ViewController) => ViewController; 'getRouteId': () => RouteID; @@ -3546,7 +3546,7 @@ declare global { export interface IonNavAttributes extends HTMLAttributes { 'animated'?: boolean; 'delegate'?: FrameworkDelegate; - 'onIonNavChanged'?: (event: CustomEvent) => void; + 'onIonNavChanged'?: (event: CustomEvent) => void; 'root'?: any; 'rootParams'?: any; 'swipeBackEnabled'?: boolean; @@ -4733,8 +4733,8 @@ declare global { declare global { interface HTMLIonRouterElement extends HTMLStencilElement { 'base': string; - 'navChanged': (isPop: boolean) => Promise; - 'push': (url: string, backDirection?: boolean) => Promise; + 'navChanged': (direction: RouterDirection) => Promise; + 'push': (url: string, direction?: RouterDirection) => Promise; 'useHash': boolean; } var HTMLIonRouterElement: { @@ -5977,7 +5977,7 @@ declare global { * Emitted when the tab changes. */ 'onIonChange'?: (event: CustomEvent) => void; - 'onIonNavChanged'?: (event: CustomEvent) => void; + 'onIonNavChanged'?: (event: CustomEvent) => void; 'scrollable'?: boolean; /** * If true, the tabbar diff --git a/core/src/components/back-button/back-button.tsx b/core/src/components/back-button/back-button.tsx index 2790d44cda..a97b80d6cd 100644 --- a/core/src/components/back-button/back-button.tsx +++ b/core/src/components/back-button/back-button.tsx @@ -1,6 +1,7 @@ import { Component, Element, Prop } from '@stencil/core'; import { Config } from '../../index'; import { openURL } from '../../utils/theme'; +import { RouterDirection } from '../router/utils/interfaces'; @Component({ tag: 'ion-back-button', @@ -41,7 +42,7 @@ export class BackButton { ev.preventDefault(); nav.pop(); } else if (this.defaultHref) { - openURL(this.defaultHref, ev, true); + openURL(this.defaultHref, ev, RouterDirection.Back); } } diff --git a/core/src/components/hide-when/hide-when.tsx b/core/src/components/hide-when/hide-when.tsx index 333d735cd7..8425174f49 100644 --- a/core/src/components/hide-when/hide-when.tsx +++ b/core/src/components/hide-when/hide-when.tsx @@ -38,8 +38,4 @@ export class HideWhen implements DisplayWhen { } }; } - } - - - diff --git a/core/src/components/nav/nav-util.ts b/core/src/components/nav/nav-util.ts index 7579ff9c8d..e600cac186 100644 --- a/core/src/components/nav/nav-util.ts +++ b/core/src/components/nav/nav-util.ts @@ -34,8 +34,8 @@ export const enum ViewState { } export const enum NavDirection { - back = 'back', - forward = 'forward' + Back = 'back', + Forward = 'forward' } export type NavParams = {[key: string]: any}; @@ -58,6 +58,7 @@ export interface NavOptions { keyboardClose?: boolean; progressAnimation?: boolean; ev?: any; + updateURL?: boolean; delegate?: FrameworkDelegate; viewIsReady?: () => Promise; } diff --git a/core/src/components/nav/nav.tsx b/core/src/components/nav/nav.tsx index 6f84ad6031..047098dc3d 100644 --- a/core/src/components/nav/nav.tsx +++ b/core/src/components/nav/nav.tsx @@ -13,7 +13,7 @@ import { import { ViewController, isViewController } from './view-controller'; import { Animation, Config, DomController, FrameworkDelegate, GestureDetail, NavOutlet } from '../..'; -import { RouteID, RouteWrite } from '../router/utils/interfaces'; +import { RouteID, RouteWrite, RouterDirection } from '../router/utils/interfaces'; import { AnimationOptions, ViewLifecycle, lifecycle, transition } from '../../utils/transition'; import { assert } from '../../utils/helpers'; @@ -25,7 +25,6 @@ import mdTransitionAnimation from './animations/md.transition'; }) export class NavControllerBase implements NavOutlet { - private _children: NavControllerBase[] = []; private _ids = -1; private _init = false; private _queue: TransitionInstruction[] = []; @@ -64,7 +63,7 @@ export class NavControllerBase implements NavOutlet { } } - @Event() ionNavChanged: EventEmitter; + @Event() ionNavChanged: EventEmitter; componentWillLoad() { this.id = 'n' + (++ctrlIds); @@ -209,27 +208,31 @@ export class NavControllerBase implements NavOutlet { let resolve: (result: RouteWrite) => void; const promise = new Promise((r) => resolve = r); - + let finish: Promise; const commonOpts: NavOptions = { + updateURL: false, viewIsReady: () => { - let markVisible; - const p = new Promise(r => markVisible = r); + let mark: Function; + const p = new Promise(r => mark = r); resolve({ changed: true, element: this.getActive().element, - markVisible + markVisible: async () => { + mark(); + await finish; + } }); return p; } }; if (viewController) { - this.popTo(viewController, {...commonOpts, direction: NavDirection.back}); + finish = this.popTo(viewController, {...commonOpts, direction: NavDirection.Back}); } else if (direction === 1) { - this.push(id, params, commonOpts); + finish = this.push(id, params, commonOpts); } else if (direction === -1) { - this.setRoot(id, params, {...commonOpts, direction: NavDirection.back, animate: true}); + finish = this.setRoot(id, params, {...commonOpts, direction: NavDirection.Back, animate: true}); } else { - this.setRoot(id, params, commonOpts); + finish = this.setRoot(id, params, commonOpts); } return promise; } @@ -244,11 +247,6 @@ export class NavControllerBase implements NavOutlet { } : undefined; } - @Method() - getAllChildNavs(): any[] { - return this._children.slice(); - } - @Method() canGoBack(view = this.getActive()): boolean { return !!(view && this.getPrevious(view)); @@ -331,13 +329,6 @@ export class NavControllerBase implements NavOutlet { } this._init = true; - const isPop = result.direction === NavDirection.back; - if (this.useRouter) { - const router = document.querySelector('ion-router'); - router && router.navChanged(isPop); - } - this.ionNavChanged.emit({isPop}); - if (ti.done) { ti.done( result.hasCompleted, @@ -348,6 +339,18 @@ export class NavControllerBase implements NavOutlet { ); } ti.resolve(result.hasCompleted); + + if (ti.opts.updateURL !== false && this.useRouter) { + const router = document.querySelector('ion-router'); + if (router) { + const direction = (result.direction === NavDirection.Back) + ? RouterDirection.Back + : RouterDirection.Forward; + + router && router.navChanged(direction); + } + } + this.ionNavChanged.emit(); } private _failed(rejectReason: any, ti: TransitionInstruction) { @@ -528,7 +531,7 @@ export class NavControllerBase implements NavOutlet { } } // default the direction to "back" - opts.direction = opts.direction || NavDirection.back; + opts.direction = opts.direction || NavDirection.Back; } const finalBalance = this._views.length + (insertViews ? insertViews.length : 0) - (removeCount ? removeCount : 0); @@ -556,7 +559,7 @@ export class NavControllerBase implements NavOutlet { if (ti.enteringRequiresTransition) { // default to forward if not already set - opts.direction = opts.direction || NavDirection.forward; + opts.direction = opts.direction || NavDirection.Forward; } } @@ -757,7 +760,7 @@ export class NavControllerBase implements NavOutlet { // default the direction to "back"; const opts: NavOptions = { - direction: NavDirection.back, + direction: NavDirection.Back, progressAnimation: true }; @@ -809,7 +812,6 @@ export class NavControllerBase implements NavOutlet { canSwipeBack(): boolean { return ( this.swipeBackEnabled && - this._children.length === 0 && !this.isTransitioning && this.canGoBack() ); diff --git a/core/src/components/nav/readme.md b/core/src/components/nav/readme.md index dbc835aea2..5f1e16d6e1 100644 --- a/core/src/components/nav/readme.md +++ b/core/src/components/nav/readme.md @@ -72,9 +72,6 @@ boolean #### getActive() -#### getAllChildNavs() - - #### getByIndex() diff --git a/core/src/components/router-outlet/route-outlet.tsx b/core/src/components/router-outlet/route-outlet.tsx index b5ea8ec71e..881fa54133 100644 --- a/core/src/components/router-outlet/route-outlet.tsx +++ b/core/src/components/router-outlet/route-outlet.tsx @@ -82,7 +82,7 @@ export class RouterOutlet implements NavOutlet { async setRouteId(id: string, data: any, direction: number): Promise { const changed = await this.setRoot(id, data, { duration: direction === 0 ? 0 : undefined, - direction: direction === -1 ? NavDirection.back : NavDirection.forward, + direction: direction === -1 ? NavDirection.Back : NavDirection.Forward, }); return { changed, diff --git a/core/src/components/router/router.tsx b/core/src/components/router/router.tsx index d0fb36da48..47ef115845 100644 --- a/core/src/components/router/router.tsx +++ b/core/src/components/router/router.tsx @@ -1,9 +1,9 @@ -import { Build, Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core'; +import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core'; import { Config, DomController } from '../../index'; import { flattenRouterTree, readRedirects, readRoutes } from './utils/parser'; import { readNavState, writeNavState } from './utils/dom'; import { chainToPath, generatePath, parsePath, readPath, writePath } from './utils/path'; -import { RouteChain, RouteRedirect, RouterEventDetail } from './utils/interfaces'; +import { RouteChain, RouteRedirect, RouterDirection, RouterEventDetail } from './utils/interfaces'; import { routeRedirect, routerIDsToChain, routerPathToChain } from './utils/matching'; import { printRoutes } from './utils/debug'; @@ -53,9 +53,7 @@ export class Router { const tree = readRoutes(this.el); this.routes = flattenRouterTree(tree); - if (Build.isDev) { - printRoutes(this.routes); - } + printRoutes(this.routes); // schedule write if (this.timer) { @@ -75,17 +73,21 @@ export class Router { this.state++; window.history.replaceState(this.state, document.title, document.location.href); } - const direction = window.history.state >= this.state ? 1 : -1; - this.writeNavStateRoot(this.getPath(), direction); + const direction = window.history.state >= this.state + ? RouterDirection.Forward + : RouterDirection.Back; + + const path = this.getPath(); + console.debug('[ion-router] URL changed -> update nav', path, direction); + this.writeNavStateRoot(path, direction); } @Method() - async navChanged(isPop: boolean): Promise { + async navChanged(direction: RouterDirection): Promise { if (this.busy) { return false; } - console.debug('[IN] nav changed -> update URL'); - const { ids, pivot } = readNavState(document.body); + const { ids, outlet } = readNavState(document.body); const chain = routerIDsToChain(ids, this.routes); if (!chain) { console.warn('no matching URL for ', ids.map(i => i.id)); @@ -93,31 +95,38 @@ export class Router { } const path = chainToPath(chain); - this.setPath(path, isPop); + if (!path) { + console.warn('router could not match path because some required param is missing'); + return false; + } - if (chain.length > ids.length) { - await this.writeNavState(pivot, chain.slice(ids.length), 0); + console.debug('[ion-router] nav changed -> update URL', ids, path); + this.setPath(path, direction); + if (outlet) { + console.debug('[ion-router] updating nested outlet', outlet); + await this.writeNavState(outlet, chain, RouterDirection.None, ids.length); } this.emitRouteChange(path, null); return true; } @Method() - push(url: string, backDirection = false) { + push(url: string, direction = RouterDirection.Forward) { const path = parsePath(url); - this.setPath(path, backDirection); + this.setPath(path, direction); - return this.writeNavStateRoot(path, backDirection ? -1 : 1); + console.debug('[ion-router] URL pushed -> updating nav', url, direction); + return this.writeNavStateRoot(path, direction); } - private async writeNavStateRoot(path: string[], direction: number): Promise { + private async writeNavStateRoot(path: string[], direction: RouterDirection): Promise { if (this.busy) { return false; } const redirect = routeRedirect(path, this.redirects); let redirectFrom: string[] = null; if (redirect) { - this.setPath(redirect.to, true); + this.setPath(redirect.to, direction); redirectFrom = redirect.from; path = redirect.to; } @@ -129,24 +138,25 @@ export class Router { return changed; } - private async writeNavState(node: any, chain: RouteChain, direction: number): Promise { + private async writeNavState(node: any, chain: RouteChain, direction: RouterDirection, index = 0): Promise { if (this.busy) { return false; } try { this.busy = true; - const changed = await writeNavState(node, chain, 0, direction); + const changed = await writeNavState(node, chain, direction, index); this.busy = false; return changed; } catch (e) { this.busy = false; - throw e; + console.error(e); + return false; } } - private setPath(path: string[], isPop: boolean) { + private setPath(path: string[], direction: RouterDirection) { this.state++; - writePath(window.history, this.base, this.useHash, path, isPop, this.state); + writePath(window.history, this.base, this.useHash, path, direction, this.state); } private getPath(): string[] | null { @@ -154,6 +164,7 @@ export class Router { } private emitRouteChange(path: string[], redirectPath: string[]|null) { + console.debug('[ion-router] route changed', path); const from = this.previousPath; const redirectedFrom = redirectPath ? generatePath(redirectPath) : null; const to = generatePath(path); diff --git a/core/src/components/router/test/parser.spec.tsx b/core/src/components/router/test/parser.spec.tsx index 1bf2fbb451..eb2f531e1a 100644 --- a/core/src/components/router/test/parser.spec.tsx +++ b/core/src/components/router/test/parser.spec.tsx @@ -20,12 +20,12 @@ describe('readRoutes', () => { r4.appendChild(r6); const expected: RouteTree = [ - { path: [''], id: 'main-page', children: [], params: {router: root} }, - { path: ['one-page'], id: 'one-page', children: [], params: {router: root} }, - { path: ['secondpage'], id: 'second-page', params: {router: root}, children: [ - { path: ['5', 'hola'], id: '4', params: {router: root}, children: [ - { path: ['path', 'to', 'five'], id: '5', children: [], params: {router: root} }, - { path: ['path', 'to', 'five2'], id: '6', children: [], params: {router: root} } + { path: [''], id: 'main-page', children: [], params: undefined }, + { path: ['one-page'], id: 'one-page', children: [], params: undefined }, + { path: ['secondpage'], id: 'second-page', params: undefined, children: [ + { path: ['5', 'hola'], id: '4', params: undefined, children: [ + { path: ['path', 'to', 'five'], id: '5', children: [], params: undefined }, + { path: ['path', 'to', 'five2'], id: '6', children: [], params: undefined } ] } ] } ]; diff --git a/core/src/components/router/test/path.spec.tsx b/core/src/components/router/test/path.spec.tsx index dd4f9e2fa4..5d98179514 100644 --- a/core/src/components/router/test/path.spec.tsx +++ b/core/src/components/router/test/path.spec.tsx @@ -78,7 +78,7 @@ describe('chainToPath', () => { { id: '3', path: ['segment'], params: undefined }, { id: '8', path: [':name'], params: undefined }, ]; - expect(() => chainToPath(chain)).toThrowError('missing param name'); + expect(chainToPath(chain)).toBeNull(); }); it('should raise an exception 2', () => { @@ -86,7 +86,7 @@ describe('chainToPath', () => { { id: '3', path: ['segment'], params: undefined }, { id: '8', path: [':name', ':id'], params: {name: 'hey'} }, ]; - expect(() => chainToPath(chain)).toThrowError('missing param id'); + expect(chainToPath(chain)).toBeNull(); }); }); diff --git a/core/src/components/router/utils/dom.ts b/core/src/components/router/utils/dom.ts index cae1d9e16e..c79f2bfc96 100644 --- a/core/src/components/router/utils/dom.ts +++ b/core/src/components/router/utils/dom.ts @@ -1,6 +1,6 @@ -import { NavOutlet, NavOutletElement, RouteChain, RouteID } from './interfaces'; +import { NavOutlet, NavOutletElement, RouteChain, RouteID, RouterDirection } from './interfaces'; -export async function writeNavState(root: HTMLElement|undefined, chain: RouteChain|null, index: number, direction: number): Promise { +export async function writeNavState(root: HTMLElement|undefined, chain: RouteChain|null, direction: RouterDirection, index: number): Promise { // find next navigation outlet in the DOM const outlet = searchNavNode(root); @@ -16,11 +16,11 @@ export async function writeNavState(root: HTMLElement|undefined, chain: RouteCha // if the outlet changed the page, reset navigation to neutral (no direction) // this means nested outlets will not animate if (result.changed) { - direction = 0; + direction = RouterDirection.None; } // recursivelly set nested outlets - const changed = await writeNavState(result.element, chain, index + 1, direction); + const changed = await writeNavState(result.element, chain, direction, index + 1); // once all nested outlets are visible let's make the parent visible too, // using markVisible prevents flickering @@ -30,14 +30,14 @@ export async function writeNavState(root: HTMLElement|undefined, chain: RouteCha return changed; } -export function readNavState(root: HTMLElement) { +export function readNavState(root: HTMLElement | null) { const ids: RouteID[] = []; - let pivot: NavOutlet|null; - let node: HTMLElement|undefined = root; + let outlet: NavOutlet|null; + let node: HTMLElement|null = root; while (true) { - pivot = searchNavNode(node); - if (pivot) { - const id = pivot.getRouteId(); + outlet = searchNavNode(node); + if (outlet) { + const id = outlet.getRouteId(); if (id) { node = id.element; id.element = undefined; @@ -49,7 +49,7 @@ export function readNavState(root: HTMLElement) { break; } } - return {ids, pivot}; + return {ids, outlet}; } const QUERY = ':not([no-router]) ion-nav,:not([no-router]) ion-tabs, :not([no-router]) ion-router-outlet'; diff --git a/core/src/components/router/utils/interfaces.ts b/core/src/components/router/utils/interfaces.ts index 75a17f8dc6..7adf1fece4 100644 --- a/core/src/components/router/utils/interfaces.ts +++ b/core/src/components/router/utils/interfaces.ts @@ -10,6 +10,12 @@ export interface RouterEventDetail { to: string; } +export const enum RouterDirection { + None = 0, + Forward = 1, + Back = -1, +} + export interface RouteRedirect { from: string[]; to: string[]|undefined; diff --git a/core/src/components/router/utils/parser.ts b/core/src/components/router/utils/parser.ts index fd92dad46f..0c27ae9416 100644 --- a/core/src/components/router/utils/parser.ts +++ b/core/src/components/router/utils/parser.ts @@ -1,6 +1,5 @@ import { RouteChain, RouteNode, RouteRedirect, RouteTree } from './interfaces'; import { parsePath } from './path'; -import { mergeParams } from './matching'; export function readRedirects(root: Element): RouteRedirect[] { @@ -16,16 +15,13 @@ export function readRedirects(root: Element): RouteRedirect[] { } export function readRoutes(root: Element, node = root): RouteTree { - const commonParams = { - router: root - }; return (Array.from(node.children) as HTMLIonRouteElement[]) .filter(el => el.tagName === 'ION-ROUTE' && el.component) .map(el => { return { path: parsePath(readProp(el, 'url')), id: readProp(el, 'component').toLowerCase(), - params: mergeParams(commonParams, el.componentProps), + params: el.componentProps, children: readRoutes(root, el) }; }); diff --git a/core/src/components/router/utils/path.ts b/core/src/components/router/utils/path.ts index 1c856c3873..b283e1c125 100644 --- a/core/src/components/router/utils/path.ts +++ b/core/src/components/router/utils/path.ts @@ -1,4 +1,4 @@ -import { RouteChain } from './interfaces'; +import { RouteChain, RouterDirection } from './interfaces'; export function generatePath(segments: string[]): string { const path = segments @@ -8,14 +8,14 @@ export function generatePath(segments: string[]): string { return '/' + path; } -export function chainToPath(chain: RouteChain): string[] { +export function chainToPath(chain: RouteChain): string[]|null { const path = []; for (const route of chain) { for (const segment of route.path) { if (segment[0] === ':') { const param = route.params && route.params[segment.slice(1)]; if (!param) { - throw new Error(`missing param ${segment.slice(1)}`); + return null; } path.push(param); } else if (segment !== '') { @@ -26,17 +26,16 @@ export function chainToPath(chain: RouteChain): string[] { return path; } -export function writePath(history: History, base: string, usePath: boolean, path: string[], isPop: boolean, state: number) { +export function writePath(history: History, base: string, usePath: boolean, path: string[], direction: RouterDirection, state: number) { path = [base, ...path]; let url = generatePath(path); if (usePath) { url = '#' + url; } - if (isPop) { - // history.back(); - history.replaceState(state, '', url); - } else { + if (direction === RouterDirection.Forward) { history.pushState(state, '', url); + } else { + history.replaceState(state, '', url); } } diff --git a/core/src/components/tabs/tabs.tsx b/core/src/components/tabs/tabs.tsx index 1f8f7ff279..2b6dd19a0f 100644 --- a/core/src/components/tabs/tabs.tsx +++ b/core/src/components/tabs/tabs.tsx @@ -1,6 +1,6 @@ import { Build, Component, Element, Event, EventEmitter, Listen, Method, Prop, State } from '@stencil/core'; import { Config, NavOutlet } from '../../index'; -import { RouteID, RouteWrite } from '../router/utils/interfaces'; +import { RouteID, RouteWrite, RouterDirection } from '../router/utils/interfaces'; @Component({ @@ -68,7 +68,7 @@ export class Tabs implements NavOutlet { * Emitted when the tab changes. */ @Event() ionChange: EventEmitter; - @Event() ionNavChanged: EventEmitter; + @Event() ionNavChanged: EventEmitter; componentWillLoad() { this.useRouter = !!document.querySelector('ion-router') && !this.el.closest('[no-router]'); @@ -105,7 +105,8 @@ export class Tabs implements NavOutlet { } await this.setActive(selectedTab); await this.notifyRouter(); - return this.tabSwitch(); + await this.tabSwitch(); + return true; } @Method() @@ -119,7 +120,7 @@ export class Tabs implements NavOutlet { return { changed: true, element: this.selectedTab, - markVisible: () => { this.tabSwitch(); } + markVisible: () => this.tabSwitch(), }; } @@ -220,14 +221,14 @@ export class Tabs implements NavOutlet { return selectedTab.setActive(); } - private tabSwitch(): boolean { + private tabSwitch() { const selectedTab = this.selectedTab; const leavingTab = this.leavingTab; this.leavingTab = undefined; this.transitioning = false; if (!selectedTab) { - return false; + return; } selectedTab.selected = true; @@ -236,17 +237,15 @@ export class Tabs implements NavOutlet { leavingTab.active = false; } this.ionChange.emit(selectedTab); - this.ionNavChanged.emit({isPop: false}); - return true; + this.ionNavChanged.emit(); } - return false; } private notifyRouter() { if (this.useRouter) { const router = document.querySelector('ion-router'); if (router) { - return router.navChanged(false); + return router.navChanged(RouterDirection.Forward); } } return Promise.resolve(false); diff --git a/core/src/utils/theme.ts b/core/src/utils/theme.ts index 412c699fdc..700459957f 100644 --- a/core/src/utils/theme.ts +++ b/core/src/utils/theme.ts @@ -1,4 +1,5 @@ import { CssClassMap } from '../index'; +import { RouterDirection } from '../components/router/utils/interfaces'; /** * Create the mode and color classes for the component based on the classes passed in @@ -65,12 +66,12 @@ export function getClassMap(classes: string | undefined): CssClassMap { return map; } -export function openURL(url: string, ev: Event, isPop = false) { +export function openURL(url: string, ev: Event, direction = RouterDirection.Forward) { if (url && url[0] !== '#' && url.indexOf('://') === -1) { const router = document.querySelector('ion-router'); if (router) { ev && ev.preventDefault(); - return router.componentOnReady().then(() => router.push(url, isPop)); + return router.componentOnReady().then(() => router.push(url, direction)); } } return Promise.resolve(); diff --git a/core/src/utils/transition.ts b/core/src/utils/transition.ts index 28e3e6a843..f0e334145b 100644 --- a/core/src/utils/transition.ts +++ b/core/src/utils/transition.ts @@ -121,7 +121,7 @@ function fireDidEvents(enteringEl: HTMLElement, leavingEl: HTMLElement) { function setZIndex(enteringEl: HTMLElement, leavingEl: HTMLElement, direction: NavDirection) { if (enteringEl) { - enteringEl.style.zIndex = (direction === NavDirection.back) + enteringEl.style.zIndex = (direction === NavDirection.Back) ? '99' : '101'; }