Don't want page to refresh upon viewing - Ionic 2+

Question

When the user views the home screen for the first time - they are being sent there via this.nav.setRoot(Page). This presents an issue when I have three other pages settings root to a page. For example - I go to the home page, which is set root, so that home page data is loaded initially for the first time. Then the user navigates to the message page. Then the user goes back to the home page, the data is reloaded again. I don't want that to happen. I would like to only call it once, but due to setRoot, it refreshes the page. Just like how navCtrl.push(Page) and .pop, the data is not refreshed. I have a hamburger navigation style and that's why I have the set roots for each page in the hamburger navigation.

app.comp.ts

openPage() {
    this.nav.setRoot(Page);
  }
  openPageTwo() {
    this.nav.setRoot(MessagesPage);
  }

How do I override the nav.setRoot refresh? Or use something else entirely?

Thanks

Answer 1

Exactly where are you refreshing your data? In what function?

Lifecycle events

I think your problem will be solved by using the correct lifecycle event. For example, ionViewDidLoad :

Runs when the page has loaded. This event only happens once per page being created. If a page leaves but is cached, then this event will not fire again on a subsequent viewing. The ionViewDidLoad event is good place to put your setup code for the page.

Have you tried refreshing your data there?

Global variable or service

As an alternative, you can create a global variable or a service that holds your data. Once you setRoot to a page for the first time, do the refresh and update the global value and do not refresh it the subsequent times that you setRoot to that page. This is not my favorite way, but will do the job for you.

Tabs:

Rather than setting roots several times, you may wanna try ionic tabs.

Answer 2

By setting a rootpage using navCtrl.setRoot(), you tell Ionic this page is the begin of the navigation tree of your application. For example, after a login, you should .setRoot(HomePage);

When you want to navigate from HomePage to MessagesPage, you should use navCtrl.push(), to pop the MessagesPage on top of the HomePage. eg; navCtrl.push(MessagesPage);

Answer 3

You can use a provider, since it is stored on memory once and every one that injects it will get its properties and data.

some-provider.ts

import { Injectable } from '@angular/core';

@Injectable()
export class SomeProvider {

    public data: DataModel;

    constructor(public http: Http) {
    }
}

And then import that on your app's module providers variable.

After, get this provider on your component's constructor

some-page.ts

@Component({
    selector: 'app-some-page',
    templateUrl: 'app-some-page.html'
})
export class AppSomePage {

    data: DataModel;

    constructor(public someProvider: SomeProvider) {
        this.data = this.someProvider.data;
    }
}