Passing data back from nav.pop()

Ionic Framework ionic-v3
1

Just looking for best practice for sending data from a child route, back up to its parent. For example, if I have a list view and I want to add an item which is complex enough to merit its own page, how do I get that added item back to the list view? Now obviously I could just re-fetch the entire list but that seems kind of silly and not efficient. I found that I can also pass a “callback function” in the nav params when pushing the AddPage onto the nav stack, but that also felt wrong (though I like it better than the first option). It’d be great if I could pass the data back through the nav.pop() method, but what is the recommended way to do what I need to do?

1 Like
2

I use the solution of @aaronksaunders, passing a callback function, described in following tickets and it works like a charm

@Jeffroylance added to the Ionic list the idea to have the possibility to pass params to nav.pop

3

hi, reedrichards, can you share an example of how you implement the callback function? i can’t really figure it out… thanks you in advance.

4

I also like to know how you achieved…

Will be thankful if possible can you share an example?

5

I did nothing else than the solution provided by @Jeffroylance in the post I listed above…

Gonna copy his answer here:

myCallbackFunction = (_params) => {
 return new Promise((resolve, reject) => {
     this.test = _params;
     resolve();
 });
}

// push page...
functionToBeClicked() {
    this.navController.push(OtherPageComponent, {
        callback: this.myCallbackFunction;
    });
}

and in the other page (in this example would be “OtherPageComponent”)

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

 ionViewWillLeave() {
    this.callback(param).then(()=>{
       this.navController.pop();
   });
}
8 Likes
6

Thanks for the reply, it will be great if you can share your code of the application where apply this callback function :slight_smile:
Because I am new to Ionic2, hope to have some sample code on how to apply the function.

1 Like
7

Actually don’t have in my code anymore :wink:

But I edited the code above, adding some more details. Let me knows if you’ve got more questions.

8

Alright, that’s ok, thanks again for your kindness to help.
I’ll try it out later, any problems I’ll come back to you. :grin:

1 Like
9

This is almost right. you need to bind the context to the callback fn though:

edit() {
    this.nav.push(EditPage, {item: this.item, callback: this.updateItem.bind(this)});
}
10

Actually in my case, if I remember correctly, I didn’t had to pass the context to the function. But you are right in the example above “this.” before “myCallbackFunction” was missing. I edited the solution like this:

// push page...
functionToBeClicked() {
    this.navController.push(OtherPageComponent, {
        callback: this.myCallbackFunction;
   });
}
1 Like
11

Yeah in my case I needed to reference the this belonging to functionToBeClicked() in order to access the class dependencies.

12

Coolio, good to know in case I would face problems accessing some stuffs from there :wink:

13

Wanted to share what I just found on Stack Overflow

So you can basically just grab from the NavStack and update the data directly

14

I think that falls squarely within the domain of “just because you can doesn’t mean you should”.

15

So what would be the correct way to do it?
Currently the methods I am aware of are:

  • Update the NavStack directly
  • Use Events
  • Use a callback Function
17

I get error, callback is not a function, how to tackle this

18

without displaying your code I can’t tell

19

Hi @jeneser. Though it is very late, I believe my solution will be useful and very simple. Even I had faced situations where I need to pass a variable from child to parent component or making a variable globally accessible. In these scenarios generally people go with the local storage approach, which is a space consumer and also you need take care of additional overhead of deleting the variables from local storage after their usage is done.

  • My solution is create a service you can name it as sharedvaribles.ts.

  • And import it on app.module.ts and add it to the providers.

  • Declare any variables that you want to pass bw child and parent or variables that you want access throughout the app there.

  • You can access them in any of the component by importing sharedvariable.ts and creating a variable of that type in constructor.

  • Say varible name sharedVarible and you have created variable named user_email in sharedVarible.ts. Then you can access it via this.sharedVarible.useremail. Changing it on component will reflect on another, as there is a single instance of sharedvarible class.

20

it is not working in ionic 4 ? how can i use these type of things in ionic 4

21

I think this is a great approach. Would like to see a working sample of this.

Anyway is there an established way on how to do this now?