ionic-frameworkionic3navparams

Ionic 3 NavParams Pushing Data from Page 1 to Page 3

I’m working on an application with multiple different pages and I need some help.

My application retrieves data from a database in Parse, and I am using providers in order to share this data to my other pages.

My main page (Page 1) asks the user to select a city. Based on the user’s selection, the next page (Page 2) will display data specific to that city, and also has links to resources that will lead to Page 3.

My issue is that Page 3 lists data for all the cities, instead of the city that was selected in Page 1.

Is it possible to pass the data from page 1, to page 2, and page 3?

So far, I have tried this:

Page 1:

selectCity(item) {
      this.navCtrl.push( {item : item} };
}

Page 2: 

city: any;
this.city = this.navParams.get(‘item’);

// there is an array ‘resource’ which contains names of different pages. this method pushes the selected page. 

selectResource() {
      this.navCtrl.push(resource.page)
}

Page 3:

city: any;

this.city = this.navParams.get(‘item’);

When I try to display the value of this.city in the console log, it says undefined.

Solution

  • Pushing a page and adding parameter like so:

    this.navCtrl.push(resource.page, {item: item});

    Please note that you are missing the second parameter item on page 2 on selectResource()

    Retrieve the data on page 3 (in the constructor for instance) like so

    this.city = this.navParams.get('item');

    Please also note, that you may want to use an provider. This allows you to share data throughout the application.

    Here you will find more info on that: https://www.gajotres.net/ionic-2-sharing-data-between-pagescomponents/2/