Ionic2 第2步，在主页面中的方法执行完成之前呈现选项卡内容

我有一个仪表板页面。此页面有两个选项卡，用于显示最近的销售额和最近的库存。 当用户插入仪表板时，调用加载仪表板项的方法

我的仪表板.ts

import { Component } from '@angular/core';
import {NavController, NavParams, LoadingController } from 'ionic-angular';
import {Storagehelper} from '../../providers/storagehelper';
import { DashboardrecentsalesPage } from '../dashboardrecentsales/dashboardrecentsales';
import { DashboardrecentinventoryPage } from '../dashboardrecentinventory/dashboardrecentinventory';
import {Webservice} from '../../providers/webservice';
/**
 * Generated class for the Dashboard page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */

@Component({
  selector: 'page-dashboard',
  templateUrl: 'dashboard.html',
})
export class DashboardPage {
  private recentSales;
  private recentInventory;
  private loading;
  private ajaxRequest;


  constructor(public navCtrl: NavController, public navParams: NavParams, private storagehelper: Storagehelper, public loadingCtrl: LoadingController, public webservice: Webservice) {

      this.loadDashboardItems();


      this.recentSales = DashboardrecentsalesPage; //This is the default tab in dashboard page
      this.recentInventory = DashboardrecentinventoryPage;


  }


  ionViewWillLeave(){
    if(this.loading) this.loading.dismiss().catch(() => {});

    if(this.ajaxRequest!=undefined){
        this.ajaxRequest.unsubscribe();
    }
  }



  private loadDashboardItems(){
      //HERE API REQUEST IS MADE AND data is saved to Localstorage

  }

}

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, Tabs } from 'ionic-angular';
import {Storagehelper} from '../../providers/storagehelper';
/**
 * Generated class for the Dashboardsummaryitems page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */

@Component({
  selector: 'page-dashboardrecentsales',
  templateUrl: 'dashboardrecentsales.html',
})
export class DashboardrecentsalesPage {
      private RecentItems;

      constructor(public navCtrl: NavController, public navParams: NavParams, private storagehelper: Storagehelper) {
            this.getDashboardItems();
      }

      getDashboardItems(){
            this.RecentItems = this.storagehelper.getStorageItem("RecentItems");
            //This RecentItems property is used to render view dashboardrecentsales
      }



}

和默认选项卡仪表板RecentSales.ts

import { Component } from '@angular/core';
import {NavController, NavParams, LoadingController } from 'ionic-angular';
import {Storagehelper} from '../../providers/storagehelper';
import { DashboardrecentsalesPage } from '../dashboardrecentsales/dashboardrecentsales';
import { DashboardrecentinventoryPage } from '../dashboardrecentinventory/dashboardrecentinventory';
import {Webservice} from '../../providers/webservice';
/**
 * Generated class for the Dashboard page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */

@Component({
  selector: 'page-dashboard',
  templateUrl: 'dashboard.html',
})
export class DashboardPage {
  private recentSales;
  private recentInventory;
  private loading;
  private ajaxRequest;


  constructor(public navCtrl: NavController, public navParams: NavParams, private storagehelper: Storagehelper, public loadingCtrl: LoadingController, public webservice: Webservice) {

      this.loadDashboardItems();


      this.recentSales = DashboardrecentsalesPage; //This is the default tab in dashboard page
      this.recentInventory = DashboardrecentinventoryPage;


  }


  ionViewWillLeave(){
    if(this.loading) this.loading.dismiss().catch(() => {});

    if(this.ajaxRequest!=undefined){
        this.ajaxRequest.unsubscribe();
    }
  }



  private loadDashboardItems(){
      //HERE API REQUEST IS MADE AND data is saved to Localstorage

  }

}

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, Tabs } from 'ionic-angular';
import {Storagehelper} from '../../providers/storagehelper';
/**
 * Generated class for the Dashboardsummaryitems page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */

@Component({
  selector: 'page-dashboardrecentsales',
  templateUrl: 'dashboardrecentsales.html',
})
export class DashboardrecentsalesPage {
      private RecentItems;

      constructor(public navCtrl: NavController, public navParams: NavParams, private storagehelper: Storagehelper) {
            this.getDashboardItems();
      }

      getDashboardItems(){
            this.RecentItems = this.storagehelper.getStorageItem("RecentItems");
            //This RecentItems property is used to render view dashboardrecentsales
      }



}

此处在

dashboard.ts

中发出API请求并将数据保存在

LocalStorage

和“dashboardrecentsales.ts”从本地存储获取数据，并呈现视图以显示在选项卡上

问题

我遇到的问题是，如果用户第一次访问

仪表板

页面，即使数据保存在localstorage中，选项卡页面也不会从localstorage获取任何数据

似乎选项卡是在仪表板页面的

loadDashboardItems

方法执行完成之前呈现的

我试着把

this.recentSales = DashboardrecentsalesPage; //This is the default tab in dashboard page
      this.recentInventory = DashboardrecentinventoryPage;

在

loadDashboardItems

方法中，所有内容都保存到localstorage，但根本没有呈现任何选项卡视图

---

有人可以建议我在这种情况下可以做什么。

对于您的情况，您可以使用ionViewDidLoad（）加载仪表板项目。试试这样的

ionViewDidLoad(){
    this.loadDashboardItems();
}

检查以了解有关所有预定义NavController方法的更多信息

---

希望有帮助

无论如何，我用

event.publish

和

event.subscribe

解决了这个问题。更多信息

链接中的示例代码。我用这个逻辑来刷新内容

import { Events } from 'ionic-angular';

// first page (publish an event when a user is created)
constructor(public events: Events) {}
createUser(user) {
  console.log('User created!')
  events.publish('user:created', user, Date.now());
}


// second page (listen for the user created event after function is called)
constructor(public events: Events) {
  events.subscribe('user:created', (user, time) => {
    // user and time are the same arguments passed in `events.publish(user, time)`
    console.log('Welcome', user, 'at', time);
  });
}

---

已经试过了，不起作用。选项卡仍在执行完成之前呈现。

loadDashboardItems（）

您试图实现什么？创建一个提供者，在那里加载api数据，并将数据带到您需要的任何页面