CODEWITHSUNDEEP
javascriptangularionic2
Akash Rao
Akash Rao

Reputation: 928

How to pass parameters in pop method of ionic2

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().

Upvotes: 14

Views: 17808

Answers (8)

Aditya
Aditya

Reputation: 2546

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');
  }

}

Upvotes: 0

rhanesoghlyan
rhanesoghlyan

Reputation: 53

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
    }
  }

Upvotes: 0

Prashant
Prashant

Reputation: 1385

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;
}

Upvotes: 15

deanwilliammills
deanwilliammills

Reputation: 2787

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
});

Upvotes: 1

Tzvi Gregory Kaidanov
Tzvi Gregory Kaidanov

Reputation: 3140

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.

Upvotes: 0

Ankit Singh
Ankit Singh

Reputation: 24955

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'));
 }
}

Upvotes: 1

Lucas Moulin
Lucas Moulin

Reputation: 2550

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]);
});

Upvotes: 14

TheBrockEllis
TheBrockEllis

Reputation: 979

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.

Upvotes: 2

Related Questions