問題描述
我有一個帶有 3 個選項卡的簡單項目.當用戶點擊第一個選項卡上某個項目的按鈕時，我需要該項目移動到第二個選項卡，反之亦然.(發生這種情況時，我還需要通知服務器).有什么方法可以讓我將項目對象傳遞給 About-Page 選項卡中的數組，反之亦然?
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() {
}
}
推薦答案
有幾種方法可以實現.
Events將是傳遞數據的正確選擇不同頁面之間.
Eventswould be the right choice when it comes to passing data between different pages.
Events 是一個發布-訂閱風格的事件系統，用于發送和在您的應用中響應應用級事件.
Events is a publish-subscribe style event system for sending and responding to application-level events across your app.
創建一個事件
constructor(public events: Events) {}
function sendData(data) {
events.publish('data:created', data);
}
使用訂閱它
events.subscribe('data:created', (data) => {控制臺.log(數據)；});
<小時>
使用共享服務
Use a shared service
構造函數(公共共享:共享){}推送數據(數據){this.shared.items.push(data);}
在app.module.ts中全局注入服務時，可以使用this.shared.items訪問其他組件中的items/p>
You can access items in other components using this.shared.items when you inject the service globally in app.module.ts
<小時>
- 另一種選擇是使用
segments而不是tabs.這取決于用例.對于簡單的應用程序，這將是更好的解決方案.您可以從文檔了解更多信息.
- 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.
編輯
我避免將數據存儲在數據庫中，因為它不是一種有效的方法.但這種方法可能會有用例.
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.
這篇關于如何在 Ionic 中的選項卡之間傳遞數據的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！