Ionic 2 将异步数据从父选项卡传递到子选项卡答案

【问题标题】：Ionic 2 Passing async data from parent to child tabsIonic 2 将异步数据从父选项卡传递到子选项卡
【发布时间】：2016-09-29 08:38:54
【问题描述】：

参考Ionic 2 passing tabs NavParams to tab

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

【问题讨论】：

标签： asynchronous ionic-framework tabs ionic2

【解决方案1】：

您链接的问题中的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    
});

【讨论】：

同样的事情......因为父级和第一个选项卡是同时创建的，当父级从异步方法获取信息时，子级没有数据。解决方案是将此异步方法放在第一个选项卡中，然后使用该服务通过其他选项卡传递数据。
“从不”（这是您的原始问题）与“当父母获得信息时”之间存在差异。无需将异步方法移至选项卡，将其留在父项中并为所有人使用该服务，看看我的编辑

【解决方案2】：

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

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

这对我有用。

【讨论】：