Ionic 2从父级到子级选项卡传递异步数据

时间:2016-05-31 11:02:03

标签: asynchronous ionic-framework tabs ionic2

参考Ionic 2 passing tabs NavParams to tab

提供的解决方案有效。但是如果参数是通过父级中的异步方法获得的呢?第一个选项卡永远不会获得“foodId”的值。 有没有办法做到这一点?

2 个答案:

答案 0 :(得分:0)

您链接的问题中的second answer是一个很好的解决方案。使用选项卡和父级共享的服务。

在您的服务中,您可以使用Promises让标签知道数据何时可用:

    import {Injectable} from 'angular2/core';

    @Injectable()

    export class Service{
        constructor(){}
    }

    getParams() {    
     asyncMethod().then( (data) => { 
       this.params= data; 
       Promise.resolve(params) });
     }
    } 

然后在您的父母和页面中,您可以获得参数:

    this.service.getParams().then( (params) => { 

     // do whatever with the params    
});

答案 1 :(得分:0)

这是我从父选项卡进行异步调用的解决方案;

@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>

这对我有用。