Ionic-framework: rootParams in ion-nav not returning data

[annalynayop]

Ionic version: (check one with "x")
[ ] 1.x
[ x] 2.x

I'm submitting a ... (check one with "x")
[x ] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

Passing data in rootParams
Expected behavior:

Return data

Related code:
Page 1:
this.test = {x: 'For Testing'};

<ion-nav [root]="rootPage" [rootParams]="test"></ion-nav>

Page 2:
console.log(this.navParams); // no return data
or
console.log(this.navParams.get('x')); // no return data

Ionic info:
System information:
Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.47
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 7
Node Version: v6.9.1
Xcode version: Not installed

[warent]

this is happening to me as well...

[annalynayop]

Hi @warent since it's still not working, I tried in this doc http://ionicframework.com/docs/v2/api/navigation/NavController/ the Navigating from the Root component . Maybe this can help you too.

[mordka]

This is still an issue in Ionic 3.0.1
I found that the rootParams are available in NavController instance, but rootParam property is missing in the typing. This works:
(navCtrl as any).rootParams

[manucorporat]

can someone provide a small plunker or repo that reproduces the issue?

[warent]

@manucorporat Reproducing this is really trivial. @zuna003 provided reproduction steps

[alexbainbridge]

FYI this is working as expected, however the timing is off.

Going back to the original example, if you wait (e.g. 1.5 seconds) from setting, to navigating to the second page, the navparams value is there. If you navigate immediately, it is not.

It doesn't appear to be a zone thing.

[Timings from actual device]

[aggarwalankush]

@manucorporat I found the solution for this issue. In line
https://github.com/driftyco/ionic/blob/59eb9a328d353326540d767921057a887058d66f/src/components/nav/nav.ts#L145, root is set without rootParams.

I changed it from this.setRoot(page); to this.setRoot(page, this.rootParams); and resolved my issue. Can you please look into this and add a proper fix?

+Adding a linked issue https://github.com/driftyco/ionic/issues/6530

[danielsogl]

@aggarwalankush I created a PR with your solution.

[aggarwalankush]

@danielsogl This is not a good solution. I tried to point out the problematic code. As both root and rootParams are @Input properties, rootParams might not be initialized while setting root so this.setRoot(page, this.rootParams); might not always work.

A good solution would be taking below logic out of setter and put somewhere else. Might be in ngOnChanges()

    if (this._hasInit) {
      this.setRoot(page);
    }

[aggarwalankush]

@danielsogl @manucorporat instead of setting rootPage, I'm using following code and it works.

this.appCtrl.getRootNav().setRoot(root, { myParams: someParamsObject });

Let me know if it's the good solution.

[sharonswli]

So I got it working with the following code (see below). I'm facing the same issue as @alexbainbridge described: sometimes calling this.navParams.data on my Tabbed page returns the object I have set in Tab.ts as expected, and sometimes it just returns an empty object, causing template errors in my tabbed page.

Anyone has any idea what's causing this? Is there another solution/workaround that ensures data is passed into the tabbed page every time? The inconsistency is frustrating and unacceptable when running the app in production.

Login.ts

login() {
  this.app.getRootNav().setRoot(TabsPage, { user: userData });
}

Tabs.ts

export class TabsPage {
  dashboardRoot: any = 'Dashboard';
  dashboardParams: any = {
    user: this.navParams.get('user')
  }
}

Tabs.html

<ion-tabs [selectedIndex]="activeTabIndex">
  <ion-tab [root]="dashboardRoot" [rootParams]="dashboardParams"></ion-tab>
</ion-tabs>

Dashboard.ts

ngOnInit() {
  this.user = this.navParams.get('user'); // Unreliable but returns the user object
}

[baladin]

i am facing the same issue. My app.html is

rootPage navParams is empty.

[jo-soft]

@amirhammad: i have a similar issue: it's working fine the first time. but if you change the value rootPage it fails.

          <ion-nav [root]="selectedTab.component" [rootParams]="selectedTab.params"></ion-nav>

step 1: set selectedTab to some value T1 with param = P1 - everything works fine
step 2: change the value of selectedTab, say to T2
step 3: change the value of selectedTab back to T1. - NavParams in the component is empty ({}) because it calls change on root ignoring the params.

[stillatmylinux]

What helped me was to move my this.navParams out of the constructor function and into the ngOnInit() function.

 constructor(
        private navParams
 ) { 
      console.log(typeof this.navParams) // undefined
 }

 ngOnInit() {
     console.log(typeof this.navParams) // object
 }

[rodpatulski]

Still had this problem and the workaround for me was to not rely on the 'rootPrams' property in the it just didn't work for me.

What DID work for me was:
Page: 1 (my app.component.ts)
ngAfterViewInit(): void { this.nav.setRoot(WelcomePage, {'fake': 'fakeValue'}); }

WelcomePage:
-- in the constructor...
navParams.get('fake');

The trick was to explicitly call setRoom in app.component.ts versus relying on the name matching from .

[ionitron-bot[bot]]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/152