Ionic 4 pass data between pages

how to pass data between pages in ionic 4 ?
I ran into this problems when I was upgrading my apps from v3.9.2 to v4.0.0.beta.

in Ionic 3, there is stack style navigation like this

in the source page, you pass data as parameters of ‘NavController.push()’:

this.nav.push('MapPage', {locs:locs});

in the destination page, you pick up the data from 'NavParams:

let tmps: TransLoc[] = this.navParams.get('locs');

Now, how can I do the same thing in Ionic 4 with the Angular navigation?

I passed the data in the source page by ‘NavController.goForward()’,

this.nav.goForward('/app/tabs/(locations:map)', true, {queryParams: {'locs': this.locs}});

I pick up the data in the destination page by ‘ActivatedRoute.queryParams’

this.route.queryParams
      .subscribe(params => {
        this.setLocs(params['locs']);

unfortunately, this did not work as I expected. I actually pick up an ‘undefined’

does anyone any idea? or any alternatives

thanks

2 Likes

I think with route you could pass easily id but when it comes to objects I personally think that the easiest way is to use a provider

you create a provider like

@Injectable({
    providedIn: 'root'
})
export class MyNavService {
   myParam: any; // of course replace any with a nice interface of your own
 }

then in your calling page you do

 this.myNavService.myParam = {locs:locs};
 await this.navCtrl.goForward('/map-page');

and in the page where you need the param

 ngOnInit() {
     this.myObject = this.myNavService.myParam;
 }
5 Likes

also there maybe about ids: NavController.goForward() Query Params

Hi, did you find a work around?

well, as per the suggestion of reedrichards

I created a helper service for the purpose of passing data between page;

below are my implementation excerpt
the helper service

import { Injectable } from '@angular/core';
import { TransLoc } from '../../classes/trans-loc';

@Injectable({
  providedIn: 'root'
})
export class ParamLocs {
  private _loc: TransLoc;

  set loc(l: TransLoc) {
    this._loc = l;
  }

  get loc(): TransLoc {
    const tmp: TransLoc = this._loc;
    this._loc = undefined;
    return tmp;
  }

}

the source pages

...
import { ParamLocs } from '../../services/param-locs/param-locs.service';
...

@Component({
  selector: 'app-locations',
  templateUrl: './locations.page.html',
  styleUrls: ['./locations.page.scss'],
})
export class LocationsPage implements OnInit {
  private subs: Subscription;
  locs: TransLoc[] = [];
  constructor( ..., private router: Router, private param: ParamLocs, ...) { }
...
  clickDisp(loc: TransLoc) {
    this.param.loc = loc;
    this.router.navigateByUrl('/app/tabs/(locs:dloc)');
  }

  clickEdit(sliding: ItemSliding, loc: TransLoc) {
    sliding.close();
    this.param.loc = loc;
    this.router.navigateByUrl('/app/tabs/(locs:edit)');
  }
...

the destination page

import { Component, OnInit } from '@angular/core';
import { ParamLocs } from '../../services/param-locs/param-locs.service';
import { TransLoc } from '../../classes/trans-loc';
...
@Component({
  selector: 'app-location',
  templateUrl: './location.page.html',
  styleUrls: ['./location.page.scss'],
})
export class LocationPage implements OnInit {
  loc: TransLoc = new TransLoc();
...
  constructor(private param: ParamLocs, ...) { }
...
  ngOnInit() {
    const tmp: TransLoc = this.param.loc;
    if (tmp) {
      // clone loc to prevent contamination
      this.loc.id = tmp.id;
      this.loc.name = tmp.name;
      this.loc.lon = tmp.lon;
      this.loc.lat = tmp.lat;
      this.loc.home = tmp.home;
    }
   ...
  }
...
}

the ‘getter’ method was implemented in the helper service to ‘flush’ the carrier variable to prevent inadvertent effects.

5 Likes

Thanks for the reply. I ended up doing the same thing yesterday. But I started a new project to test tabs form normal routing and figured out the only way to get queryParams to work is using normal routing with router.navigate. Tabs routing has very limited functionality.