Ionic 2从父标签到子标签传递异步数据

Question

参考Ionic 2 passing tabs NavParams to tab

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

Answer 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    
});

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

这对我有用。