RootParams of first tab

Ionic Framework ionic-v3
1

I have a tabs page which passes a model through rootParams. However, the first tab (or the one which is selected by default) always gets undefined params. Can you help me solve it? Here is the code.

tabs.ts:

    private tab1: any;
    private tab2: any;  
    private model: any;

    constructor(public navCtrl: NavController, 
	  			public alertCtrl: AlertController, 
				private noteService: NoteService,
				private userService: UserService,
				private loadingCtrl: LoadingController,
				private noteModel: NoteModel,
				public params:NavParams) {
		
		// set the tabs

		this.tab1 = Tab1Page;
		this.tab2 = Tab2Page;

        this.getModel();
    }

tabs.html:

<ion-content padding>
	<ion-tabs tabsPlacement="top">
   	<ion-tab tabIcon="create" 	[root]="tab1"	[rootParams]="{model: model}"></ion-tab>		
    	<ion-tab tabIcon="eye" 	[root]="tab2"	[rootParams]="{model: model}"></ion-tab>
  	</ion-tabs>
</ion-content>

tab1.ts

export class Tab1Page{
	model: any;

    constructor(navParams: NavParams) {
		this.model = navParams.get("model");
    }
}

model.ts

@Injectable()
export class NoteModel {
    id:any;

    // dates
    name: string;
	year: string;  

 

    constructor() {
        
    }

    getNote(data) {        
        this.name   = data.name || '';
        this.year   = data.year || 2000;

        return this;
    }
}
2

One more thing. If i don’t try to get the model on the Tab1Page i can navigate through all the tabs except the first. So the problem is just the undefined model in the first tab’s constructor.

3

I am also getting this problem.

At first i thought that tab1 might be loading faster than TabsPage. So i removed all my function in tab1 to speed up the loading, but still getting undefined.

4

I think you’re executing the getModel() function too late. At the time of executing the getModel() you already did define and loaded tab1 and at that time the model value would be undefined.

Execute the getModel() before defining the tabs. And be sure that your model value is defined before loading the tab.

this.getModel();
// first set the model value
// then set your tabs root page

this.tab1 = Tab1Page;
this.tab2 = Tab2Page;