CODEWITHSUNDEEP
angularionic-frameworkmenuside-menuangular-hybrid
yennis
yennis

Reputation: 21

Ionic menu unable to open after navigate to the same page from other page

I have a page (called as Page A) contains 2 menus. Left side menu is filtering function menu which is the component inside the page. Right side menu is general menu which can open in all pages.

Both menu have no issue in normal flow like Home Page -> Page A. The issue happen when we have more page stack inside like Home Page -> Page A -> Page B -> Page C -> Page A.

The left side menu unable to open for the flow above. When i print out the menu controller, i saw the menu array consists of 3 menus inside. 1st menu is general menu, 2nd and 3rd menu is the filtering menu with same menu id. I suspect the old menu and new menu on left side is overlapped tgt. As document mentioned, there is only one menu get activated in a time. So, the new menu is not working now. Menu array in normal flow Menu array in complicated flow

The issue will gone once i refresh the page again.

I have tried few way to solve this. But also failed.

  1. I have tried to put below code in ionViewWillEnter(). Tried to disable the old menu. Menu array for the code applied `

    this.menuCtrl.getMenus().then((menu) => { if(menu.length > 2) { menu1.disabled = false menu2.disabled = true } })

`

  1. Instead of using ionic default menu, i use css, html and js to build my own menu. But the same problem still exist.

Page A draft picture

Hope you guys can help me on this. Appreciate your help. Thanks!

Upvotes: 1

Views: 1350

Answers (1)

Litvinenko Vyacheslav
Litvinenko Vyacheslav

Reputation: 11

not sure this exactly case, but will try to help

i had similar issue having 2 independent modules with few independent menus for each module. as in your case, it worked right when i used absolute url, but when i tried to use routing to navigate from module a to b and then back to a, first module's menu havent shown more

looking through DOM i founded out what after going to module b, module a wasnt deleted from DOM (just display: none), so after going back it it wasnt be able to work correct anymore

solving was to replace parent's to default route tag (angular's in my case)

seems like ionic-router-outlet bug (btw about year ago had similar problem with ion-nav, when it makes component with display: none instead deleting it from DOM, maybe thats casual problem with ionic tools)

upd: i almost sure ion-tab use ion-router inside, so if u use it maybe its worth to write your own tabs component

Upvotes: 1

Related Questions