問(wèn)題描述
我有一個(gè)帶有 3 個(gè)選項(xiàng)卡的簡(jiǎn)單項(xiàng)目.當(dāng)用戶點(diǎn)擊第一個(gè)選項(xiàng)卡上某個(gè)項(xiàng)目的按鈕時(shí)，我需要該項(xiàng)目移動(dòng)到第二個(gè)選項(xiàng)卡，反之亦然.(發(fā)生這種情況時(shí)，我還需要通知服務(wù)器).有什么方法可以讓我將項(xiàng)目對(duì)象傳遞給 About-Page 選項(xiàng)卡中的數(shù)組，反之亦然?
I have a simple project with 3 tabs. When the user hits a button on an item on the first tab I need that item to move to the second tab and vise versa. (I also need to notify a server when this happens). Is there any way for me to pass a item object to a array in the About-Page tab and vise versa?
home.html
<ion-header>
<ion-toolbar>
<ion-title>Home</ion-title>
<ion-buttons end>
<button ion-button icon-only color="royal" (click)="updateData()">
<ion-icon name="refresh"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item-sliding *ngFor="let item of items">
<ion-item>
<ion-icon name="alert" *ngIf="!item.taken" item-left></ion-icon>
<ion-icon name="checkmark-circle-outline" *ngIf="item.taken" item-left></ion-icon>
<h2><b>{{item.title}}</b></h2>
<h3>{{item.name}} | {{item.number}}</h3>
<h3 style="white-space: normal;"><b>Details:</b> {{item.text}}</h3>
</ion-item>
<ion-item-options side="left">
<button ion-button color="primary" (click)="smsPressed(item)">
<ion-icon name="text"></ion-icon>
Text
</button>
<button ion-button color="secondary" (click)="phonePressed(item)">
<ion-icon name="call"></ion-icon>
Call
</button>
</ion-item-options>
<ion-item-options side="right">
<button ion-button color="primary" *ngIf="item.taken" (click)="responderPressed(item)">
<ion-icon name="person"></ion-icon>
Responder
</button>
<button ion-button color="primary" *ngIf="!item.taken" (click)="takecallPressed(item)">
<ion-icon name="navigate"></ion-icon>
Take Call
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
<ion-fab right bottom>
<button ion-fab color="light" (click)="addItem()"><ion-icon name="add"></ion-icon></button>
</ion-fab>
</ion-content>
home.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AlertController } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
items: any[];
constructor(public navCtrl: NavController, public alertCtrl: AlertController) {
this.items = []
this.items.push({
title: "Title",
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium quam at est porta fringilla.",
name: "Sam",
number: "(555) 555-5555",
taken: true,
responder: {
name: "Bob",
phone: "(666) 666-6666"
}
})
this.items.push({
title: "Stuff",
text: "Take Now",
name: "Sam",
number: "(555) 555-5555",
taken: false,
responder: {}
})
}
buttonPressed(item){
alert(item.title)
}
smsPressed(item){alert(item.number)}
phonePressed(item){alert(item.number)}
responderPressed(item){alert(item.responder.name)}
takecallPressed(item){alert(item.taken)}
updateData(){
this.items.unshift({
title: "Added",
text: "Take Now",
name: "Sam",
number: "(555) 555-5555",
taken: false,
responder: {}
})
}
addItem(){
let prompt = this.alertCtrl.create({
title: 'Add Call',
message: "Enter the details for the call you want to add",
inputs: [
{ name: 'title', placeholder: 'Title'},
{ name: 'text', placeholder: 'Details'},
{ name: 'name', placeholder: 'Name'},
{ name: 'number', placeholder: 'Number'},
],
buttons: [
{ text: 'Cancel',handler: data => {}},
{ text: 'Save',handler: data => {
this.items.unshift({
title: data.title,text: data.text,
name: data.name,number: data.number,
taken: false,responder: {}
})
}
}
]
});
prompt.present();
}
}
tabs.html
<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="Current" tabIcon="alarm"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Account" tabIcon="contacts"></ion-tab>
</ion-tabs>
tabs.ts
import { Component } from '@angular/core';
import { HomePage } from '../home/home';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
@Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
// this tells the tabs component which Pages
// should be each tab's root Page
tab1Root: any = HomePage;
tab2Root: any = AboutPage;
tab3Root: any = ContactPage;
constructor() {
}
}
推薦答案
有幾種方法可以實(shí)現(xiàn).
Events將是傳遞數(shù)據(jù)的正確選擇不同頁(yè)面之間.
Eventswould be the right choice when it comes to passing data between different pages.
Events 是一個(gè)發(fā)布-訂閱風(fēng)格的事件系統(tǒng)，用于發(fā)送和在您的應(yīng)用中響應(yīng)應(yīng)用級(jí)事件.
Events is a publish-subscribe style event system for sending and responding to application-level events across your app.
創(chuàng)建一個(gè)事件
constructor(public events: Events) {}
function sendData(data) {
events.publish('data:created', data);
}
使用訂閱它
events.subscribe('data:created', (data) => {控制臺(tái).log(數(shù)據(jù))；});
<小時(shí)>
使用共享服務(wù)
Use a shared service
構(gòu)造函數(shù)(公共共享:共享){}推送數(shù)據(jù)(數(shù)據(jù)){this.shared.items.push(data);}
在app.module.ts中全局注入服務(wù)時(shí)，可以使用this.shared.items訪問(wèn)其他組件中的items/p>
You can access items in other components using this.shared.items when you inject the service globally in app.module.ts
<小時(shí)>
- 另一種選擇是使用
segments而不是tabs.這取決于用例.對(duì)于簡(jiǎn)單的應(yīng)用程序，這將是更好的解決方案.您可以從文檔了解更多信息.
- Another option would be to use
segmentsinstead oftabs. This depends on the use case. For simple applications, this would be the better solution. You can learn more from the documentation.
編輯
我避免將數(shù)據(jù)存儲(chǔ)在數(shù)據(jù)庫(kù)中，因?yàn)樗皇且环N有效的方法.但這種方法可能會(huì)有用例.
I have avoided storing the data in database as its not an efficient way to do this. But there may be use cases for such an approach.
這篇關(guān)于如何在 Ionic 中的選項(xiàng)卡之間傳遞數(shù)據(jù)的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！