Ionic 2 Passing async data from parent to child tabs - asynchronous

Question

Referring to Ionic 2 passing tabs NavParams to tab
The solution provided works. But what if the parameter is obtained by an async method in the parent? The first tab will never gets the value of "foodId".
Is there a way to do that?

Answer 1

The second answer in the question you linked is a good solution. Use a service shared by both the tab and the parent.
in your service you can use Promises to let tabs know when the data is available:
import {Injectable} from 'angular2/core';
#Injectable()
export class Service{
constructor(){}
}
getParams() {
asyncMethod().then( (data) => {
this.params= data;
Promise.resolve(params) });
}
}
Then in your parent and pages you can get the params when they are available:
this.service.getParams().then( (params) => {
// do whatever with the params
});

Answer 2

Here is my solution for asyn call from parent tab;
#Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
displayTab:boolean=false;
constructor(params: NavParams) {
this.params = params;
console.log(this.params); // returns NavParams {data: Object}
this.fooId = this.params.data;
// this tells the tabs component which Pages should be each tab's root Page
this.tab1Root = Tab1;
this.tab2Root = Tab2;
this.tab3Root = Tab3;
this.asyncFunction();
}
asyncFunction(){
//does async func
displayTab=true;
}
}
<ion-tabs *ngIf="displayTab">
<ion-tab tabTitle="Tab1" [root]="tab1Root" [rootParams]="fooId"></ion-tab>
<ion-tab tabTitle="Tab2" [root]="tab2Root" [rootParams]="fooId"></ion-tab>
<ion-tab tabTitle="Tab3" [root]="tab3Root" [rootParams]="fooId"></ion-tab>
</ion-tabs>
This worked for me.