diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx index c97dbe574b..f850b08f15 100644 --- a/core/src/components/modal/modal.tsx +++ b/core/src/components/modal/modal.tsx @@ -200,6 +200,7 @@ export class Modal implements OverlayInterface { hostData() { return { + 'no-router': true, style: { zIndex: 20000 + this.overlayId, } diff --git a/core/src/components/nav/nav.tsx b/core/src/components/nav/nav.tsx index 7e36c4fc6b..ed28e76448 100644 --- a/core/src/components/nav/nav.tsx +++ b/core/src/components/nav/nav.tsx @@ -37,6 +37,7 @@ export class NavControllerBase implements NavOutlet { private _init = false; private _queue: TransitionInstruction[] = []; private _sbTrns: Transition; + private useRouter = false; isTransitioning = false; private _destroyed = false; @@ -60,8 +61,7 @@ export class NavControllerBase implements NavOutlet { @Watch('root') rootChanged() { if (this.root) { - const useRouter = !!document.querySelector('ion-router'); - if (!useRouter) { + if (!this.useRouter) { this.setRoot(this.root); } else if (Build.isDev) { console.warn(' does not support a root attribute when using ion-router.'); @@ -72,6 +72,7 @@ export class NavControllerBase implements NavOutlet { @Event() ionNavChanged: EventEmitter; componentWillLoad() { + this.useRouter = !!document.querySelector('ion-router') && !this.el.closest('[no-router]'); if (this.swipeBackEnabled === undefined) { this.swipeBackEnabled = this.mode === 'ios' && this.config.getBoolean('swipeBackEnabled', true); } @@ -359,9 +360,9 @@ export class NavControllerBase implements NavOutlet { this.isTransitioning = false; // let's see if there's another to kick off this._nextTrns(); - const router = document.querySelector('ion-router'); const isPop = result.direction === NavDirection.back; - if (router) { + if (this.useRouter) { + const router = document.querySelector('ion-router'); router.navChanged(isPop); } diff --git a/core/src/components/popover/popover.tsx b/core/src/components/popover/popover.tsx index a51b1603ed..9448ff513c 100644 --- a/core/src/components/popover/popover.tsx +++ b/core/src/components/popover/popover.tsx @@ -215,6 +215,7 @@ export class Popover implements OverlayInterface { style: { zIndex: 10000 + this.overlayId, }, + 'no-router': true, class: { ...themedClasses } diff --git a/core/src/components/router/utils/dom.ts b/core/src/components/router/utils/dom.ts index f3bfbd969b..d9188ab907 100644 --- a/core/src/components/router/utils/dom.ts +++ b/core/src/components/router/utils/dom.ts @@ -50,7 +50,7 @@ export function readNavState(node: HTMLElement) { return {ids, pivot}; } -const QUERY = 'ion-nav,ion-tabs'; +const QUERY = ':not([no-router]) ion-nav,:not([no-router]) ion-tabs'; function searchNavNode(root: HTMLElement): NavOutletElement { if (root.matches(QUERY)) { diff --git a/core/src/components/tabs/tabs.tsx b/core/src/components/tabs/tabs.tsx index aa8fc3e751..47f93f2e2b 100644 --- a/core/src/components/tabs/tabs.tsx +++ b/core/src/components/tabs/tabs.tsx @@ -11,6 +11,7 @@ export class Tabs implements NavOutlet { private ids = -1; private transitioning = false; + private useRouter = false; private tabsId: number = (++tabIds); private leavingTab: HTMLIonTabElement | undefined; @@ -70,6 +71,8 @@ export class Tabs implements NavOutlet { @Event() ionNavChanged: EventEmitter; componentWillLoad() { + this.useRouter = !!document.querySelector('ion-router') && !this.el.closest('[no-router]'); + this.loadConfig('tabsPlacement', 'bottom'); this.loadConfig('tabsLayout', 'icon-top'); this.loadConfig('tabsHighlight', true); @@ -159,7 +162,7 @@ export class Tabs implements NavOutlet { } private initSelect(): Promise { - if (document.querySelector('ion-router')) { + if (this.useRouter) { if (Build.isDev) { const selectedTab = this.tabs.find(t => t.selected); if (selectedTab) { @@ -241,9 +244,11 @@ export class Tabs implements NavOutlet { } private notifyRouter() { - const router = document.querySelector('ion-router'); - if (router) { - return router.navChanged(false); + if (this.useRouter) { + const router = document.querySelector('ion-router'); + if (router) { + return router.navChanged(false); + } } return Promise.resolve(false); }