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

Question

我有一个仪表板页面。这个页面有两个标签来显示最近的销售和最近的库存。 当用户交互仪表板时，loadDashboardItems 方法被调用。

我的 dashboard.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

  }

}

和默认标签 dashboardrecentsales.ts

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”从本地存储中获取数据并呈现视图以显示在选项卡上。

问题

我遇到的问题是，如果用户第一次访问dashboard页面，即使数据保存在localstorage中，标签页也没有从localstorage中获取任何数据。

似乎在仪表板页面的loadDashboardItems方法执行完成之前呈现了Tab。

我试着放了

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

在 loadDashboardItems 方法中，所有内容都保存到本地存储，但根本没有呈现选项卡视图。

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

Answer 1

无论如何，我使用event.publish 和event.subscribe 解决了它。更多信息Here

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

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

Answer 2

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

ionViewDidLoad(){
    this.loadDashboardItems();
}

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

希望有帮助！