3

I have a problem with navigation in ionic side menu. I need to preserve the state of the pages when the user navigate with this menu. But when the user click in one option of the menu setRoot refresh the page. I'm using the ionic starter template named side menu (https://github.com/ionic-team/starters/tree/master/ionic-angular/official/sidemenu). I make the following changes:

-In home.html

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

<ion-content padding>
  <h3>Ionic Menu Starter</h3>

  <p>
    {{text}} <button primary (click)="change();" >Change text</button>
  </p>

  <button ion-button secondary menuToggle>Toggle Menu</button>
</ion-content>

I have added a text and a button which change the text.

-In home.ts:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  text:string;
  constructor(public navCtrl: NavController) {
    this.text="Initial text";
  }
  change(){
     this.text="Text changed!";
  }
}

So when I click in the button, the text change, but when I navigate to the list, and return to the home, the text show "Initial text", but I need ti poreserve the state and show "Text changed!". I know that it's because the call setRoot method in app.component.ts, but I can't call push method because it open a new page, and when I navigate the stack increase... I need some solition that works like tabs navigation.

zgue
  • 3,793
  • 9
  • 34
  • 39
RoberV
  • 587
  • 5
  • 22

0 Answers0