Ionic - Side menu navigation - Prevent controller reload

Ionic Framework ionic-v3
1

Hello!

So I had first done a version of my app that used tabs. Using tabs, when I would navigate to a page, the view would initiate the one first time (pull data from api and display it) and when I would navigate away from it and come back, nothing would have to reload, it was basically left the way it was “in the background”.

Is there a way to do something like this with the side menu? I used the Ionic2 side menu starter and it seems to be set up fine. But for example when navigate to my podcast page and play a track, when I navigate away, the track continues to play (this is fine by me). However, when I navigate again to the podcast page, its like a whole new instance of it: the track showing as not playing, the progress bar at start, and I’m then able to press play again and two instances of that track play at the same time. Basically the whole controller fires up a new instance. So this means also that my HTTP get requests are being made every time I navigate to the page (which is less of an issue I suppose if I set up some sort of caching for that, but my primary annoyance is the podcast issue).

Any tips or advice here?

Thanks!

2

This is on purpose. Since setRoot changes the whole root of the app, is creates a new instance of the component you’re setting. Even if the component is the same one already there, it will be recreated. Since we can’t know what component is getting set, we recreate a new instance.

3

Ok I guess that makes sense.

Replacing with this.navController.push seems to have the same behavior. Same reason I assume?

I’m sure there’s some way to get the behavior I’m looking for… Like somehow preloading the components into the navigation controller and simply presenting it?

Excuse my ignorance, I’m rather new to all of this Ionic/Angular stuff lol

4

push does the same way, though its not recommended to do this from a sidemenu.

There isn’t a method for this behaviour in navController.

5

Well alrighty then. Time to find another way for now.

Thanks!

6

Did you find a solution?

7

Not really. As @mhartington mentioned, the way they currently have the side menu navigation set up will always reload the view. So I went back to a tab bar type layout because with the tabs, each view is cached so it doesn’t reload every time you switch to and from it.

I’m sure there’s got to be some way to get that same behavior on the side menu… Maybe a someone smarter than me or just a built-in feature for a future release.

8

Thats bad…
I mean, why should i use a side menu, when its not working as it should?

9

Lol I think its working “as it should”. Just not “as we’d like it to”.

10

Yea ^^ But i think it is not effective to reload the content evry time i change the page

11

I think there’s is just some confusion in what you’re expecting to happen vs what needs to happen underneath.

So you setRoot:

The entire navigation stack gets wiped and replace. We erase app history and create a new instance of a component as the root page. It doesnt “reload”, but is completely new’d again.

Push:

The navigation stack is maintained, and a new instance of the component is pushed on to the stack. Even if we’re navigating to the same component type (HomePage -> HomePage), the component still needs to be new’d again because of how the internals of angular work. The components needs to be recreated.

12

But there should be a way to cache the view when i use a side menu.

13

One way I tried is to publish event from menu click event and listen this in “TAB” page. Then run switch tab from TAB page since it’s “parent” for all

14

Interesting… So that works for you? Do you then have tabs and side menu at the same time?

Either way, its somewhat of a strange hack… :slight_smile:

15

Yes. I need switch two tab page back and forth when something is click in one tabpage and can’t find other way since tab page is just child and don’t have access to other tabpage. I did same trick

16

In my opinion, a iOnic 2 sidemenu is useless!
This should be changed i iOnic 2.1!
It should work like nav.Push().

17

Hi How to do that? can you please share the code ?

18

I am new to ionic2, but, I tried this and able to save reload from side menu, esp. in the case of if view is loaded and same option is selected from side menu

e.g., in my application, I have tabs with page1, page2 and page3 and I have side menu with same options.

lets say, user is on page1 and from side menu he selects “page1”.

By default, Page1 gets reloaded again, but, I tried this and was able to save load again.

  1. Try getting view controller from method getActive()

  2. from that object, see the component name and tabIndex. if it is same, don’t take any action otherwise load the new page.

below is the sample code

export class MyApp {
@ViewChild(Nav) nav: Nav;
rootPage: any = LoginPage;
pages: Array < { title: string, component: any, index: number } > ;

constructor(platform: Platform, public menu: MenuController) {
        platform.ready().then(() => {
            StatusBar.styleDefault();
            Splashscreen.hide();
        });

        // set our app's pages
        this.pages = [
            { title: 'page1', component: Page1, index: 0 },
            { title: 'page2', component: Page2, index: 1 },
            { title: 'page3', component: Page3, index: 2 }
        ];
    } // end constructor

showSelectedMenuOptionPage(page) {

    this.menu.close();

    var objVC = this.nav.getActive();
    if(objVC.component.name === 'TabsPage' && objVC.data.tabIndex === page.index) {
        console.log("same page, don't do anything");
    } else {
        console.log(this.nav.getActive());
        this.nav.setRoot(TabsPage, { tabIndex: page.index});
    }
}

} // end class MyApp

19

Are there any updates to this for Ionic 3?

20

Did you find any way to fix this at the end?
I really have a problem with pages coming from the sidemenu.

I use the “push” method, and sometimes there is no reload at all and everything is smooth, sometimes it just gets reloaded.
I am not able to find any pattern that could explain this.

I use “push” because I really want my index to stay in the stack.

Let me know if you have been able to implement this smoothly.

Thank you
Matt