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

Question

本质上，我有一个跟踪我构建的数组中的项目数的方法。但是，我想将此数字放在主屏幕上的卡片上，以跟踪总计的项目数，但是计算它的代码在我显示项目的实际页面中。我在引用写它们的打字稿文件之外的方法时遇到问题，我想做的是采用数组大小方法，并在链接到不同页面的不同打字稿文件中使用它。有没有简单的方法可以做到这一点？

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

因此，在此文件中，我尝试从食物页面文件中的totalFoodAmount方法获取输出，并将其放在主页打字稿文件中，以便我可以在主页的HTML中使用它。

食物页面

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

主页

底部的"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
}
}

主页.html 这是html文件，在它说"食品项目变量"的地方是我想放置值的地方，以便它可以在用户将项目添加到列表时不断更新。

<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

您可以为此创建一个服务。因此，您的方法被抽象为一种通用形式，您的HomePage.ts和FoodPage.ts都可以访问。我认为您只需要能够通过FoodPage的listItems，因为那里有 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();
}

Answer 2

因此，应该成为页面子级的唯一组件应该是：

离子头

离子含量

离子页脚

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

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

然后将其包含为：

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

你可以看看这个小的有效的帖子来解决你的问题：这里

Plnkr 为您的问题在这里;)：这里