如何在 Ionic 中的选项卡之间传递数据

Posted 2023-03-13

【中文标题】如何在 Ionic 中的选项卡之间传递数据

【英文标题】：How to pass data between tabs in Ionic

【发布时间】：2017-07-31 06:07:06

【问题描述】：

我有一个带有 3 个选项卡的简单项目。当用户点击第一个选项卡上某个项目的按钮时，我需要该项目移动到第二个选项卡，反之亦然。 （发生这种情况时，我还需要通知服务器）。有什么方法可以让我将项目对象传递给 About-Page 选项卡中的数组，反之亦然？

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: "[phone]",
        taken: true,
        responder: 
          name: "Bob",
          phone: "[phone]"
        
      )
      this.items.push(
        title: "Stuff",
        text: "Take Now",
        name: "Sam",
        number: "[phone]",
        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: "[phone]",
      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() 

  

【问题讨论】：

我做的一种方法是在选项卡 1 页面，将数据存储到 SQL 存储中，在选项卡 2 页面，从 SQL 存储中检索。可能有更好的解决方案，但如果您正在寻找快速解决方案，这可能会有所帮助

***.com/questions/31026886/…

gajotres.net/ionic-2-sharing-data-between-pagescomponents/2看看

你想分享什么数据，从什么页面到你需要的页面

我不确定您是否有与标签相关的要求。但是，使用segments 解决起来要容易得多。当然，如果您的要求是使用标签，那么会有不同的解决方案。无论如何都会回答你的问题。

【参考方案1】：

我知道，旧线程，而 Observables/Events 是一个很好的方法，

但在 Ionic 中，标签是每个标签的另一个离子路由器出口。所以你已经有了ActivatedRoute。您可能会认为您的选项卡组件中的 ActivatedRoute 仅用于该特定的 ion-router-outlet，并且它不会包含与您的 tabs.ts 相同的数据，但您可以访问父 ActivatedRoute。

这是解析器存储解析数据的地方。

在您的 tabs.ts 中填充此值（使用解析器或离子刷新器或其他方式）

this.activatedRoute.snapshot.data['yourData'];

在您的每个标签组件中，您可以通过以下方式访问它：

this.activatedRoute.snapshot.parent.data['yourData'];

不要忘记在构造函数中注入 ActivatedRoute 对象。

另外，请注意这是 ionic 4/5 的解决方案，我不知道它是否适用于 3 和更早版本。

【参考方案2】：

有几种方法可以实现这一目标。

Events 是传递数据的正确选择 不同页面之间。

Events 是一个发布-订阅风格的事件系统，用于发送和 在您的应用中响应应用级事件。

创建一个事件

constructor(public events: Events) 
function sendData(data) 
  events.publish('data:created', data);

使用订阅它

events.subscribe('data:created', (data) => console.log( data); );

---

使用共享服务

constructor(public shared: Share) pushData(data) this.shared.items.push(data);

在app.module.ts全局注入服务时，可以使用this.shared.items在其他组件中访问items

---

另一种选择是使用segments 而不是tabs。这取决于用例。对于简单的应用程序，这将是更好的解决方案。您可以通过documentation 了解更多信息。

编辑

我避免将数据存储在数据库中，因为它不是一种有效的方法。但这种方法可能会有用例。

【讨论】：

如果没有按钮单击事件，我该如何实现。当用户移动到第二个选项卡时，我想传递数据。

事件在 Ionic 5 中被移除，需要使用 Observables。在这里找到了解决方案：***.com/questions/60197785/…

【参考方案3】：

LocalStorage - 这可能是您可以解决的方法之一。

您可以在使用 1 个选项卡执行特定操作后将必要的数据存储在 localStorage 中 -

let data = "demo": "demo";
localStorage.setItem('myData',JSON.stringify(data));

现在，在另一个选项卡中，您甚至可以使用 ionic 的生命周期 ionViewWillEnter()，它会在输入视图时执行，以便刷新数据。在这里，您可以像这样访问存储在localStorage 中的数据：

ionViewWillEnter()
    let data = JSON.parse(localStorage.getItem('myData'));
    console.log("Did data load? : ",data);

注意：您需要使用JSON.stringify() 和JSON.parse() 来存储和检索localStorage，因为您只能在其中存储字符串。