Navigating back to root - menu toggle button broken

Ionic Framework ionic-v3
1

Hi All,

I have a root page:

<ion-header>
  <ion-navbar>
    <button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
  </ion-navbar>
</ion-header>

But when I try return to the root page (with a parameter), it displays the menu toggle button (3 lines), but when I click it it does not work (i.e. does nothing, where it should display the side menu).

ts file which returns to root:

  this.nav.insert(0, SearchPage, {
    employeeModel: this.employeeModel
  });

If I try popToRoot(options), this works and the menu toggle button is working. However, it does not reload the page with the new parameter.

Any ideas how I should navigate back to the root page with a parameter please?

Thanks

2

I am thinking maybe I should display the menu manually.

If I add a click function menuToggleClick(), I can get it to call the function.

html

<button menuToggle (click)="menuToggleClick()">
  <ion-icon name="menu"></ion-icon>
</button>

ts

  menuToggleClick() {
    alert('menuToggleClick');
  }

How do I get it to display the menu?

3

The overall problem is here. You’re trying to modify the navigation stack. You should use setRoot instead.

http://ionicframework.com/docs/v2/api/components/nav/NavController/#setRoot

1 Like
4

Hi Mike,

Thanks for your assistance.

I do try the following, but with no success. It still behaves the same, It takes me to the page, displaying the menu toggle button, but when I click the button, the menu doesn’t appear.

   let params = {
     employeeModel: this.employeeModel
   };
   this.nav.setRoot(SearchPage, params);

Any ideas what I am doing wrong?

Thanks

5

Hi,

I have a similar problem.
after setRoot, the menu toggle button is broken.

I am looking for more information, but I can not isolate the problem. The problem occurs only on one page.

6

What worked for me is popToRoot and then pass the parameters by subscribing to an event.

let data = {
ratingModel: this.ratingModel
};
this.events.publish(‘mapFilter:update’, data);
this.nav.popToRoot();

and

this.events.subscribe(‘mapFilter:update’, (data) => {
this.ratingModel = data[0].ratingModel;
}

1 Like
7

That may not be the same problem as you, but here is what happened on my app:

I was redirecting to childPage in MenuPopover with:

export class MenuPopover {
    private _masterPage: MasterPage;

    constructor(private nav: NavController,
        private navParams: NavParams)
   {
        this._masterPage = this.navParams.data.masterPage;   
   } 
    
    goToChildPage() {
        this.nav.push(ChildPage, null);
    }

Now: the MenuPopover calls a function of the MasterPage, and this function makes the redirection:

   goToChildPage() {
        this.viewController.dismiss().then(() => {
            this._masterPage.redirectToChildPage();
        });
    }

Now, it’s Working

EDIT: I have not seen your last post, before my answer. Thanks for sharing.

8

I’m trying to do this.app.getRootNav().setRoot(HomePage) inside a tab to go back to a new Page that has a side menu, but after going to the new Page the toggle button it’s not showing up when the page is set, and this happens the first time, the second time it works. Looks like a timing problem.

9

still am facing same issue.Please help me anyone ASAP…

10

Yeah, I’m having a similar problem. I have a detail page that is the root of a nav stack. You can open a modal and press the Edit button therein to get to the edit page, or you might end up on the edit page directly by deep-linking in. So you’re on the edit page, but the nav stack may look like either:
[item-detail] - [modal] - [item-edit]
or
[item-edit]

So, upon item publication, I want to go back to item-detail, preferably with the modal closed. If I clicked in to the page, what I need to do is pop twice. If I deep-linked, I need to do a set-root.

if I clicked in and set-root out, the menu button stops working. Investigating the DOM tree leads me to believe it’s some kind of weird rendering bug - the ion-menu actually shows up, gets it’s translateX property set properly, as does the main content (I’m using push, but changing it to some other animation doesn’t help), but the menu doesn’t render in the view. Mousing over the view element highlights the right place for both the menu and pushed-over main content, but the rendered window doesn’t match the highlights when selecting elements in the DOM tree.

if I clicked in and pop once or twice everything is fine.

if i deeplinked in and set-root out everything works fine.

if I deeplinked in and pop once or twice the whole thing collapses as I don’t have a root to go to.

This seems to be a path-dependent bug, therefore. I can work around it by capturing all calls to navCtrl, investigating the current state of navCtrl, and either popping or set-rooting to actually do the navigation, but this is a pretty atrocious thing to have to do. Super-brittle (and more or less removes any benefit to actually using a navCtrl).

If anyone has any advice about further documentation / medium posts / tweets / stackoverflow questions to look at, I’d love something, as I’ve dug through (a) the documentation and (b) the source code and am stuck.

11

In case this help someone, I realized that this problem occurs from a modal, even dismissing it before call setRoot. So, I transformed my modal into a normal page and everything worked fine.

So, in resume, it seems that ‘setRoot’ does not work with ‘modal’.

2 Likes