14

I tried passing parameters in push method of ionic2. like this

this.nav.push(SecondPage, {
    thing1: data1,
    thing2: data2
});

but is there any way to pass parameter in pop().

2
  • How to pass parameters in Present method ??
    – Kartiikeya
    Jul 6, 2016 at 14:27
  • 1
    Pop currently only takes options for transitioning. Do you have to communicate with the previous page using pop? I previously used navParams in the second page to receive a callback from the first page. After I transitioned back to the first page - see (slightly old) documentation] for async details - I was able to run the callback and do whatever was needed in the first page. I'm not sure if that'll get you where you want but it's another idea to consider.
    – Phil D.
    Oct 13, 2016 at 12:38

8 Answers 8

15

This is how I achieved it in ionic-3 and find it easier.

Page from where we pop()

 this.navCtrl.getPrevious().data.thing1 =data1;
 this.navCtrl.getPrevious().data.thing2 =data2;
 this.navCtrl.pop();

Page after pop():

public ionViewWillEnter() {
     this.thing1 = this.navParams.get('thing1')|| null;
     this.thing2 = this.navParams.get('thing2')|| null;
} 
0
14

I suggest you use Events. All you have to do is to subscribe to an event on the parent page and then publish the event on the child passing the data you want:

// taken from the docs
import { Events } from 'ionic-angular';

constructor(public events: Events) {}

// first page (publish an event when a user is created)
function createUser(user) {
  console.log('User created!')
  events.publish('user:created', user);
}

// second page (listen for the user created event)
events.subscribe('user:created', (userEventData) => {
  // userEventData is an array of parameters, so grab our first and only arg
  console.log('Welcome', userEventData[0]);
});
3
  • 1
    really nice answer!!
    – Rajesh.k
    Aug 23, 2017 at 11:37
  • I do not know how I've overlooked Events this long Mar 20, 2018 at 19:30
  • 1
    use events when parent - child data passing. Aug 28, 2018 at 8:22
2

Currently, I believe that there is no way of accomplishing this.

There is a Github issue for it though, that has got some great discussion on it by the Ionic core team. It sounds like they have added it to the Ionic 2 roadmap, too! The Github issue also has some proposed work-arounds, such as adding the ParentPage to the NavParams going to the ChildPage, but it is all quite a bit hacky.

1

UPDATE: IT WAS SUPPOSED TO WORK, BUT IT DOES NOT


Seems like there is |See Doc Reference|

pop(opts) takes one parameter of type object

so

to go one step back

this.nav.pop({
    thing1: data1,
    thing2: data2
});

and to go to a specific view in the history stack

this.nav.popTo(SecondPage, {
    thing1: data1,
    thing2: data2
});

and to go to root of the stack

this.nav.popToRoot({
    thing1: data1,
    thing2: data2
});

To retrieve the params (I guess this should work. untested!)

export class SecondPage{
 constructor(params: NavParams){
   this.params = params;

   console.log(this.params.get('thing1'));
 }
}
3
  • Hi Thank you so much for the answer.. I can able to pass the parameters now but how to retrieve those parameters in 'SecondPage' . In Push() i guess ion-page is getting refreshed and i was getting the parameters. can you please help me with this.
    – Akash Rao
    Mar 31, 2016 at 5:49
  • how to send Navparams on Present method ??
    – Kartiikeya
    Jul 6, 2016 at 14:26
  • 6
    According to the documentation that is linked to, the only object that can be passed into the pop method is a NavOpts object. You can read the documentation for NavOptions on that same page just further down. It's essentially some options about how animation, easing, and direction of the navigation itself. Passing params to a pop is a current feature request. You can follow the discussion on it on Ionic's Github. Aug 24, 2016 at 21:23
1

Use popTo() instead of pop()

popTo() has params? parameter where you can pass in your paramaters like so:

    this.nav.popTo(SecondPage, {
    thing1: data1,
    thing2: data2
});
0

pass in a callback when transitioning by aaronksaunders in this forum

https://forum.ionicframework.com/t/solved-ionic2-navcontroller-pop-with-params/58104/4

Going to try it out.

0

For sent data with pop you can use getPrevious() method.

When leaving from current page get previous page and send data

ionViewWillLeave() {
    this.navCtrl.getPrevious().data.formData = {credentials: {...}};
}

In next page get data from navParams

ionViewWillEnter() {
    if (this.navParams.get('formData')) {
      // do something
    }
  }
0

If you are using ionic-angular application, you can use ionic-angular Events

page1.ts

import { Events,NavController } from 'ionic-angular';

export class page1 {

    constructor(private events: Events,
                private nvCtrl: NavController
               ) {}

     goToPage2() {
         this.navCtrl.pop();
         this.event.publish('your-event');
 }

}

page2.ts

import { Events} from 'ionic-angular';

export class page1 {

    constructor(private events: Events,
                private nvCtrl: NavController
               ) {}

     ionViewDidLoad() {
        this.events.subscribe('your-event');
  }

}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.