Question

基本上，我有一个方法可以跟踪我构建的数组中的项目数。但是，我想把这个号码放在我在主屏幕上的卡片上，以便跟踪总计的项目数量，但是计算它的代码是在显示项目的实际页面中。我无法引用他们写入的typescript文件之外的方法，我想要做的是采用数组大小方法，并在链接到不同页面的不同打字稿文件中使用它。是否有捷径可寻？

以下是相应文件的一些代码：

所以在这个文件中，我试图从Food Page文件中的totalFoodAmount方法获取输出，并将其放在Home Page typescript文件中，这样我就可以在主页的HTML中使用它。

FoodPage.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular';
import { RecipeProvider } from "../../providers/recipe-provider";
/**
 * Generated class for the FoodPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */
@IonicPage()
@Component({
  selector: 'page-food-page',
  templateUrl: 'food-page.html',
  providers: [RecipeProvider]
})
export class FoodPage {
  isFoodExpiring: boolean;
  listTitle: string;
  listItems: any[] = [];
  groupedItems = [];
  foodName: string;
  quantity: number;
  isSaveClicked: boolean;


  constructor(public navCtrl: NavController, public navParams: NavParams,
  private recipeProvider: RecipeProvider, private alertCtrl: AlertController) {

    this.groupItems(this.listItems);

  }

  totalFoodAmount() {
    return this.listItems.length;
  }

  groupItems(items){

    let sortedItems = this.listItems.sort();
    let currentLetter = false;
    let currentItems = [];

    sortedItems.forEach((value, index) => {
      if(value.charAt(0) != currentLetter){

        currentLetter = value.charAt(0);

        let newGroup = {
          letter: currentLetter,
          listItems: []
        };

        currentItems = newGroup.listItems;
        this.groupedItems.push(newGroup);

      }

      currentItems.push(value);
    });
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad FoodPage');
  }

  addItem(){
    let addFood = this.alertCtrl.create({
      title: 'Add Food',
      inputs: [{
        name: 'title'
      }],
      buttons: [
        {
          text: 'Cancel'
        },
        {
          text: 'Add Item',
          handler: (data) => {
            this.listItems.push(data);
          }
        }
      ]
    });
    addFood.present();
  }

  editItem(item){

    let editFood = this.alertCtrl.create({
      title: 'Add to list',
      inputs: [{
        name: 'title'
      }],
      buttons: [
        {
          text: 'Cancel'
        },
        {
          text: 'Save',
          handler: (data) => {
            let index = this.listItems.indexOf(item);

            if (index > -1){
              this.listItems[index] = data;
            } else {
              throw new Error("Error, index out of bounds");
            }
          }
        }
      ]
    });
    editFood.present();
  }

  deleteFood(item){
    let index = this.listItems.indexOf(item);

    if (index > -1){
      this.listItems.splice(index, 1);
    } else {
      throw new Error("Error, index out of bounds");
    }
  }
}

HomePage.ts

底部的“getFoodTotal”方法是我想要的总数，以便我可以将其打印到HTML中（在此代码下面）

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {AccountPage} from "../account-page/account-page";
import {RecipePage} from "../recipe-page/recipe-page";
import {FoodPage} from "../food-page/food-page";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {
    //TODO - Delete this later, this is just for testing login.
    window.localStorage.removeItem('currentUser');
    if (!this.isLoggedIn()){
      console.log('You are not logged in!');
      //this.navCtrl.push(LoginPage);
    }
  }

  isLoggedIn() {
    if (window.localStorage.getItem('currentUser')){
      return true;
    }
  }

  showAccountPage() {
    this.navCtrl.push(AccountPage);
  }

  //TODO - Turn this into the recipe page.
  goToRecipes() {
    this.navCtrl.push(RecipePage);
  }

  loadFoodPage(){
    this.navCtrl.push(FoodPage);
  }

  getFoodTotal(){
    return //Code Goes Here
  }
}

HomePage.html 这是html文件，在其中显示“FOOD ITEM VARIABLE”的地方，我想放置这个值，以便当用户将项目添加到列表时它可以不断更新。

  <ion-header>
  <ion-navbar color="primary">
    <ion-title>
      Home
    </ion-title>
    <ion-buttons end>
      <button (click)="showAccountPage()">
        <ion-icon style="font-size:30px" name="contact"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content class="card-background-page">

  <ion-card (click)="loadFoodPage()">
    <img src="../../assets/img/MyFoodPic.jpg">
    <div class="card-title">My Food</div>
    <div class="card-subtitle">{{FOOD ITEM VARIABLE}} Items</div>
  </ion-card>

此外，如果有人回答这个问题知道如何，是否有办法获取用户输入的项目列表并将其绑定到他们的特定帐户（通过登录）我目前正在使用firebase来处理身份验证，但是有没有更好的服务，我可以将用户条目绑定到各自的帐户？

提前致谢

Answer 1

因此，应该是页面子项的唯一组件应该是：

ion-header

离子含量

离子躯

我建议您将自定义标头组件更改为：

@Component({
  selector: 'header'
  template: `
  <ion-navbar primary>
    <ion-title>
      Ionic 2
    </ion-title>
  </ion-navbar>`
})

然后将其包括为：

<ion-header>
  <header></header>
</ion-header>

您可以针对您的问题查看这篇小巧高效的帖子：here

这里问题的Plnkr是;）：here

Answer 2

您可以为此创建服务。因此，您的方法被抽象为通用表单，您的HomePage.ts和FoodPage.ts都可以访问。我认为您只需要为listItems传递FoodPage，因为那里有CRUD操作。

为了方便您存储listItems，因为它们保存在本地存储中，然后在服务中获取然后返回值。

common-service.ts

 numOfListItems():number{
     this.storage.get('listItems').then(listItemData => {
        return listItemData.length
     })
 }

HomePage.ts

 import { Common } from '../location/of/file/common-service.ts';
 ...
 getFoodTotal(){
    return Common.numOfListItems();
 }

从Ionic 2中的其他页面访问方法

2 个答案: