Ionic V5 Navigate back with parameters

Ionic Framework
1

I want to create a route where the user is able to select something, when he has selected the thing it should be used on the previous page. in Ionic 3 it was possible to use callback for this purpose, but since we use angular navigation we can’t serialize the function if we try to do something like

  constructor(
    private navController: NavController,
  ) { }
  
  async selectItem() {
    this.navController.navigateForward(
      "select-customer", {
        state: {
          // breaks because it can't be serialized
          onDone: (selectedItem) => {

          }
        },
      })
  }

Ideally I would want the solution behave like an android app, where the activity can return a value when the activity is done. Is there a way to achieve this?

2

The problem with this design (OK, my problem with this design) is that it makes page B too dependent on page A. What I would do instead is to make a service whose job it is to carry whatever “the selected thing” is. Those who change it change it, those who care about watching it change watch it change.

3

I just don’t understand why global state is needed for a problem like this. I think it couples the page B too close to a specific problem.

I want to reuse B at a latter point in another page C, which could try to select an item from the same list for different reasons.

4

OK, then I guess we’re at a standoff on that point.

Then what about embedding B instead of having it be a standalone page? If I’m a user, I expect page B to act the same way every time I deal with it. I would be surprised if things went differently depending on whether I came at it from A or C. However, if it was a component embedded in page A and C, I wouldn’t have that problem.

And you wouldn’t have the problem you’re having either, because you could declare an @Output() binding in component B and bind it from page A or C to do whatever you desire.

5

I might be trying to use navigation for something it isn’t intended for, since I never want B to be used directly without being started from another activity like A or C.

The reason I didn’t use a component directly is because I wanted to open a new activity so I had enough space to display the entire list.

A modal might be a better fit for this kind of flow, since it allows taking the entire screen. Sorry I am new, so I don’t know all the options available yet, and I got confused since the v3 navigation system allowed it and I thought I was just missing the correct parameters :slight_smile:

6

Yes, that sounds like a much better fit to me as well.

We’ll have to do the whole “agree to disagree” bit about whether that was a good thing. Personally, I found the whole NavParams concept brittle and conducive to designs that I ended up having a hard time sustaining. I don’t miss it one bit.

7

Your probably right that passing a callback function to a route is not the best idea. I just expected a route to be the equivalent of an android activity, which would include some way of returning a value.

But i guess i still have to think of it as a web page.

1 Like