Page refresh makes navParams undefined. Persist navParams on page refresh?

Ionic Framework ionic-v3
1

I’m using ionic for a web app. When I push a page with navParams and then refresh the page the navParams are undefined. Maybe there should be some sort of flag to keep the params in the URL? The angular router does this by default. I could store my params in ionic storage, but that would kind of be overkill for my use case.

These are my versions (I’m using IonicPage decorators so my pages are deeplinked)

    "@angular/common": "4.0.2",
    "@angular/compiler": "4.0.2",
    "@angular/compiler-cli": "4.0.2",
    "@angular/core": "4.0.2",
    "@angular/forms": "4.0.2",
    "@angular/http": "4.0.2",
    "@angular/platform-browser": "4.0.2",
    "@angular/platform-browser-dynamic": "4.0.2",
    "@angular/router": "4.0.2",
    "ionic-angular": "3.1.1",

    "@ionic/app-scripts": "1.3.7",
2

What does this mean?

3

Sorry for the confusion. Just pressing the “refresh page” button in the browser (re-request the resource from the web server).

4

Simple fix is to create a provider that functions as a local Store. When you construct the page, you store the value from navParams in the provider, as well as set to true a flag that there’s something stored there. Then in ionViewDidLoad() you test the boolean, and if true, you get the value from your provider.

Edit: maybe ionViewWillEnter() is better for your use case, depending on what you need to do with the information.

5

Right thanks, but that’s not exactly what I’m looking for. I guess this is more of a feature request than an implementation question: to mimic how the angular router puts navigation parameters in the URL. This would allow page refreshes to keep track of the navParams, right?

6

Ionic routing is significantly different from Angular routing, by design, and with consultation with the Angular team. Maybe this will change in 2017 as driftyco builds toward a PWA experience instead of just a native device experience, but I don’t know. You could always post a feature request on Github. But there have been a lot of people new to the framework who have asked it to be more like Angular routing, without understanding the design decisions.

As an aside, I’ve completely removed use of navParams from my code, in favor of Redux (ngrx/Store). I think that’s a much more robust cross-platform approach.

1 Like
7

Oh wait, it looks like it might be possible with the IonicPage decorator using dynamic links: https://ionicframework.com/docs/api/navigation/IonicPage/#dynamic-links

I’ll try it out and check back in

8

Yup! Super simple with the IonicPage decorator! :smiley:
Just needed to use JSON.stringify() and JSON.parse() because my parameters are objects.

this.navCtrl.push('table-messages', {
  messages: JSON.stringify(signal['messages']),
  tableGroup: JSON.stringify(this.group)
});

@IonicPage({
  name: 'table-messages',
  segment: 'messages/:tableGroup/:messages'
})
// snip
ngOnInit() {
  this.tableGroup = JSON.parse(this.navParams.get('tableGroup'));
  this.messages = JSON.parse(this.navParams.get('messages'));
}

Does anyone know if passing a lot of data in the URL is a bad idea? Doesn’t look like it from a quick google search.

2 Likes
9

Yes. I believe you are going to hit a wall at around 2K. It’s also wasteful to be constantly marshalling and unmarshalling to JSON. I second @AaronSterling’s suggestion of a context provider.

10

Hello , dont refresh page with “logo refresh” of your navigator. (if you want to reload your app in browser )
delete all string after “localhost:8100” in your URL , and then press “Enter”