fix(router): fix selection

This commit is contained in:
Manu Mtz.-Almeida
2018-03-15 18:07:29 +01:00
parent f48d817a85
commit 207f416686
5 changed files with 17 additions and 9 deletions

View File

@ -200,6 +200,7 @@ export class Modal implements OverlayInterface {
hostData() { hostData() {
return { return {
'no-router': true,
style: { style: {
zIndex: 20000 + this.overlayId, zIndex: 20000 + this.overlayId,
} }

View File

@ -37,6 +37,7 @@ export class NavControllerBase implements NavOutlet {
private _init = false; private _init = false;
private _queue: TransitionInstruction[] = []; private _queue: TransitionInstruction[] = [];
private _sbTrns: Transition; private _sbTrns: Transition;
private useRouter = false;
isTransitioning = false; isTransitioning = false;
private _destroyed = false; private _destroyed = false;
@ -60,8 +61,7 @@ export class NavControllerBase implements NavOutlet {
@Watch('root') @Watch('root')
rootChanged() { rootChanged() {
if (this.root) { if (this.root) {
const useRouter = !!document.querySelector('ion-router'); if (!this.useRouter) {
if (!useRouter) {
this.setRoot(this.root); this.setRoot(this.root);
} else if (Build.isDev) { } else if (Build.isDev) {
console.warn('<ion-nav> does not support a root attribute when using ion-router.'); console.warn('<ion-nav> does not support a root attribute when using ion-router.');
@ -72,6 +72,7 @@ export class NavControllerBase implements NavOutlet {
@Event() ionNavChanged: EventEmitter; @Event() ionNavChanged: EventEmitter;
componentWillLoad() { componentWillLoad() {
this.useRouter = !!document.querySelector('ion-router') && !this.el.closest('[no-router]');
if (this.swipeBackEnabled === undefined) { if (this.swipeBackEnabled === undefined) {
this.swipeBackEnabled = this.mode === 'ios' && this.config.getBoolean('swipeBackEnabled', true); this.swipeBackEnabled = this.mode === 'ios' && this.config.getBoolean('swipeBackEnabled', true);
} }
@ -359,9 +360,9 @@ export class NavControllerBase implements NavOutlet {
this.isTransitioning = false; this.isTransitioning = false;
// let's see if there's another to kick off // let's see if there's another to kick off
this._nextTrns(); this._nextTrns();
const router = document.querySelector('ion-router');
const isPop = result.direction === NavDirection.back; const isPop = result.direction === NavDirection.back;
if (router) { if (this.useRouter) {
const router = document.querySelector('ion-router');
router.navChanged(isPop); router.navChanged(isPop);
} }

View File

@ -215,6 +215,7 @@ export class Popover implements OverlayInterface {
style: { style: {
zIndex: 10000 + this.overlayId, zIndex: 10000 + this.overlayId,
}, },
'no-router': true,
class: { class: {
...themedClasses ...themedClasses
} }

View File

@ -50,7 +50,7 @@ export function readNavState(node: HTMLElement) {
return {ids, pivot}; 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 { function searchNavNode(root: HTMLElement): NavOutletElement {
if (root.matches(QUERY)) { if (root.matches(QUERY)) {

View File

@ -11,6 +11,7 @@ export class Tabs implements NavOutlet {
private ids = -1; private ids = -1;
private transitioning = false; private transitioning = false;
private useRouter = false;
private tabsId: number = (++tabIds); private tabsId: number = (++tabIds);
private leavingTab: HTMLIonTabElement | undefined; private leavingTab: HTMLIonTabElement | undefined;
@ -70,6 +71,8 @@ export class Tabs implements NavOutlet {
@Event() ionNavChanged: EventEmitter<any>; @Event() ionNavChanged: EventEmitter<any>;
componentWillLoad() { componentWillLoad() {
this.useRouter = !!document.querySelector('ion-router') && !this.el.closest('[no-router]');
this.loadConfig('tabsPlacement', 'bottom'); this.loadConfig('tabsPlacement', 'bottom');
this.loadConfig('tabsLayout', 'icon-top'); this.loadConfig('tabsLayout', 'icon-top');
this.loadConfig('tabsHighlight', true); this.loadConfig('tabsHighlight', true);
@ -159,7 +162,7 @@ export class Tabs implements NavOutlet {
} }
private initSelect(): Promise<void> { private initSelect(): Promise<void> {
if (document.querySelector('ion-router')) { if (this.useRouter) {
if (Build.isDev) { if (Build.isDev) {
const selectedTab = this.tabs.find(t => t.selected); const selectedTab = this.tabs.find(t => t.selected);
if (selectedTab) { if (selectedTab) {
@ -241,9 +244,11 @@ export class Tabs implements NavOutlet {
} }
private notifyRouter() { private notifyRouter() {
const router = document.querySelector('ion-router'); if (this.useRouter) {
if (router) { const router = document.querySelector('ion-router');
return router.navChanged(false); if (router) {
return router.navChanged(false);
}
} }
return Promise.resolve(false); return Promise.resolve(false);
} }