setRootPage always creates the new instance of the Page

Ionic Framework ionic-v3
1

Hi,

I am trying to create a menu based ionic 2 application. The template (as well as the examples) show how to achieve it. Essentially this is what is suggested :

class MyApp {

  @ViewChild(Nav) nav: Nav;

  rootPage: any = HomePage;
  pages: Array<any>;

  constructor(
    private platform: Platform
  ) {

    this.initializeApp();

    this.pages = [
      { title: 'Home', component: HomePage },
      { title: 'About', component: AboutPage }
    ];
  }

  initializeApp() {
    this.platform.ready().then(() => {
      StatusBar.styleDefault();
    });
  }

  openPage(page) {
    this.nav.setRoot(page.component);
  }

The template is

<ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>

Issue I am facing is that whenever I navigate between Home & About pages, the page to which I navigate is constructed again (i.e. it is a new instance).

How to simply switch between Home & About page with out destroying when we switch to them using the menu.

Regards & thanks
Kapil

2

Why do you need to keep the same instance of the page?