每次访问页面时调用一个函数 - Ionic 2

Question

我是 Ionic 2 的新手，并实现了一个小应用程序，每当我重新访问页面时，我都想在其中调用 REST API 函数。遵循我实现的一小段代码。

import { Component } from '@angular/core';
import { NavController, NavParams, ViewController } from 'ionic-angular';
import { ItemService } from '../../providers/item-service';
import { ItemDetailsCartPage } from '../item-details-cart/item-details-cart'
@Component({
  selector: 'page-cart',
  templateUrl: 'cart.html',
  providers: [ItemService]
})
export class CartPage {
  email;
  sessionId;
  public cartData: any;
  public message: any = [];
  constructor(public navCtrl: NavController, 
      public navParams: NavParams, 
      public itemSrvc: ItemService,
      public viewCtrl: ViewController) {}
  ionViewDidLoad() {
    this.email = this.navParams.get('email');
    this.sessionId = this.navParams.get('sessionId');;
    this.loadCart();
  }

  loadCart() {
    this.itemSrvc.getCart(this.email, this.sessionId).then(successData => {
      this.cartData = successData;
      this.message = this.cartData.message;
    },failureData => {
      this.cartData = failureData;
      this.message = [{'itemName':'No items in cart', 'quantity': '', 'imgUrl':''}];
    });
  }

我创建了一个购物车页面，该页面通过调用 API 显示购物车中添加的项目。我第一次访问购物车页面时，会调用 API 并收到响应。但是第二次当我再次访问同一页面时，没有调用相同的 API 函数。

关于这个话题，我可能会有一些重复的问题，但我没有找到任何相关的答案，在网上搜索了很多之后，我发布了这个问题。

Answer 1

您应该在 ionViewDidEnter（） 生命周期钩子中添加 API 调用，以便在用户每次导航到页面时调用它。请参考以下链接：

导航控制器

Answer 2

首先阅读"生命周期事件"部分的 NavController 页面。我认为您也可以使用此方法：

ngOnInit() {
   this.email = this.navParams.get('email');
   this.sessionId = this.navParams.get('sessionId');;
   this.loadCart();
}

另请查看此链接

Answer 3

你有没有尝试过把这个.loadCart（）放在构造函数中，这是否有效？

Answer 4

import { Component } from '@angular/core';
import { NavController, NavParams, ViewController } from 'ionic-angular';
import { ItemService } from '../../providers/item-service';
import { ItemDetailsCartPage } from '../item-details-cart/item-details-cart'
@Component({
  selector: 'page-cart',
  templateUrl: 'cart.html',
  providers: [ItemService]
})
export class CartPage {
  email;
  sessionId;
  public cartData: any;
  public message: any = [];
  constructor(public navCtrl: NavController, 
      public navParams: NavParams, 
      public itemSrvc: ItemService,
      public viewCtrl: ViewController
      ) {
      this.ionViewDidLoad();  // add your function here
      }
  ionViewDidLoad() {
    this.email = this.navParams.get('email');
    this.sessionId = this.navParams.get('sessionId');;
    this.loadCart();
  }

  loadCart() {
    this.itemSrvc.getCart(this.email, this.sessionId).then(successData => {
      this.cartData = successData;
      this.message = this.cartData.message;
    },failureData => {
      this.cartData = failureData;
      this.message = [{'itemName':'No items in cart', 'quantity': '', 'imgUrl':''}];
    });
  }

现场演示