Ionic-framework: First tab never gets data from "rootParams"

[fcaivano]

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

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request

Current behavior:
When you enter a page that has tabs, all of them use data from a provider, which receive through "rootParams".

But the first tab never get's the data. If i change the order and put the 1st as 2nd, then one that now ocuppies the 2nd place will get the data (and also the first one) but not the first one (which was 2nd before).
What i mean by this is that i just changed the order to see if it was an issue with the code specific to the page but that doesn't seem to be the issue.

Expected behavior:
Im using the same procedure for all tabs, so data should appear nor matter the order.

Related code:

ClubService (club-service.ts)

getClub(club) {

    if(this.data) {
        return Promise.resolve(this.data);
    }

    return new Promise(resolve => {

        this.storage.get('token')
        .then((token) => {
            var authHeader = new Headers();
            authHeader.append('Authorization', 'Bearer ' + JSON.stringify(token).replace(/['"]+/g, ''));
            authHeader.append('App-Version', '2.0.1');

            this.http.get('https://.../clubs/'+club.id+'/info/', {
                headers: authHeader
            })
            .map(res => res.json())
            .subscribe(
                data => {
                    this.data = data;
                    resolve(this.data);
                },
                err => {
                    console.log('Error on getClub()');
                }
            );

        });

    });
}

tabs.ts

loadClub() {

    let loading = this.loadingCtrl.create({
        content: 'Loading...'
    });

    loading.present();
    this.clubService.getClub(this.navParams.data)
    .then(data => {
        this.club = data['0'];
        loading.dismiss();
    });

}

tabs.html

<ion-content padding>
<ion-tabs>
<ion-tab tabIcon="restaurant" [root]="tabMenu" [rootParams]="club"></ion-tab>
<ion-tab tabIcon="information-circle" [root]="tabInfo" [rootParams]="club"></ion-tab>
<ion-tab tabIcon="chatbubbles" [root]="tabReviews" [rootParams]="club"></ion-tab>
</ion-tabs>
</ion-content padding>

tab-info.html (as example of one of the tabs)

<ion-content class="outer-content" padding>
<ion-list *ngFor="let club of clubs" id="club-{{ club.id }}" >
    <ion-list-header>
    {{ club.name }}
    </ion-list-header>
    <ion-item *ngFor="let member of club.members" (click)="openMemberModal(member)">
        <h2>{{ member.name}}</h2>
        <ion-note item-right>{{ member.id }}</ion-note>
        <p><small>{{ member.email }}</small></p>
    </ion-item>
</ion-list>
<h4 *ngIf="!members">
    Este restaurante aún no tiene un menú disponible
</h4>

The data display's correctly on the 2nd and 3rd tabs, no matter what order i put them, it's always the one that it's first that doesn't get the data.

Maybe there's something

Other information:
Someone is maybe having a related issue (?)
https://forum.ionicframework.com/t/rootparams-of-first-tab/78779

I've searched and haven't found anything, also looked and tried to figured out with the docs.

Ionic info:

Cordova CLI: 6.5.0
Ionic Framework Version: 2.0.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: 1.9.1
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v6.9.4
Xcode version: Xcode 8.2.1 Build version 8C1002

[jgw96]

Thanks for using Ionic! We will take a look at this.

[joewill]

I ran into this issue today as well. Please consider this a +1.

For a work around I passed my data object to a Service, then retrieved when initializing the tab page. Not sure if that's the best way but it's working well for me.

All in all, this is just a small bump in the road. I'm very happy with how my app is coming around. Keep up the great work!

[marcelodd]

+1

[iamjoyce]

9714 Similar issue, except it's with <ion-nav>

Configurations:
In my own system, I am using lazy loading for <ion-tabs>.

cli packages:

    @ionic/cli-utils  : 1.19.1
    ionic (Ionic CLI) : 3.19.1

global packages:

    cordova (Cordova CLI) : 8.0.0

local packages:

    @ionic/app-scripts : 3.1.8
    Cordova Platforms  : android 6.3.0
    Ionic Framework    : ionic-angular 3.9.2

How to replicate?
Upon initial load ionic serve, the navParams receives the parameters correctly. However, after navigating around, the navParams in one of the tabs no longer receives the params.

Interesting, mordka was right that navCtrl has a property rootParams that has the params sent. It's just that the suggested implemention is a little hacky ((navCtrl as any).rootParams).

[iwantwin]

I am seeing the exact same as @iamjoyce and can confirm that the (navCtrl as any).rootParams solution is doing the same thing. I found this issue because I thought it was a bit hacky as well!

We really do need a fix for this though, the navParams should work on tabbed-views I'd think.

[stvmachine]

+1

[mslourens]

+1

[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/180