Search code examples
angularionic-frameworkcontrollernavigationionic-storage

Ionic NavController.pop() refesh destination page


I have an ionic application and I use ionic storage. I have two pages, page1 and page2. In page2.ts I add some information to the storage and then I call NavController.pop() to return to page1. In page1 I want to show this new information that was added to the storage.

The code is like this: PAGE2.TS

onSubmit() {
        let _actividad = new Actividad(this.event.nameActividad, this.event.timeStartsIntensidad, this.event.timeStartsDescanso, this.event.timeStartsCalentamiento, this.event.timeStartsRelajacion, this.event.numberIntervalos);
        this.strgCtrl.set(this.event.nameActividad, _actividad);
        console.log(_actividad.getNameActividad());
        this.navCtrl.pop();
    }

Heare, I creat an object and I store it and the call to page1.

PAGE1.HTML:

<ion-item *ngFor="let x of actividades"> 
            <button ion-item>
            <ion-thumbnail item-start>
                <img src="assets/imgs/abdominales.jpg">
            </ion-thumbnail>
            <h2>{{x.nameActividad_act}}</h2>
            <p>Intervalos: 10</p>
            <p>Intensidad: 10</p>
            </button>
            <button  ion-button class="disable-hover button button-md button-default button-default-md button-md-primary" item-end>Empezar</button>
        </ion-item>

PAGE1.TS

ionViewDidLoad() {
        this.strgCtrl.forEach( (value, key, index) => {
            this.actividades.push(value);
        })
    }

Well, this code do what I want, if I storage a new activity and refresh Page1 I can show it. But, how can I do this without refreshing page1?


Solution

  • In page1 .ts file:

    goToPage2() {
    var _that = this;
    //callback
    var callbackFunction = function (params) {
      return new Promise((resolve, reject) => {
        _that.strgCtrl.forEach( (value, key, index) => {
          _that.actividades.push(value);
        });
        resolve();
      });
    }
    // push page...
    this.navController.push(page2, {
      callback: callbackFunction
    });
    }
    

    In page2 .ts file:

    callback;
    ionViewWillEnter() {
       this.callback = this.navParams.get("callback");
    }
    ionViewWillLeave() {
       this.callback();
    }
    

    or:

    onSubmit() {
        this.callback();
        this.navCtrl.pop();
    }
    

    you can also pass some parameters.