如何在 Ionic 中的选项卡之间传递数据
我有一个带有 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
将是传递数据的正确选择不同页面之间.
Events
would 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
segments
instead 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.
相关文章