<legend id='fddwp'><style id='fddwp'><dir id='fddwp'><q id='fddwp'></q></dir></style></legend>

    <bdo id='fddwp'></bdo><ul id='fddwp'></ul>
  • <i id='fddwp'><tr id='fddwp'><dt id='fddwp'><q id='fddwp'><span id='fddwp'><b id='fddwp'><form id='fddwp'><ins id='fddwp'></ins><ul id='fddwp'></ul><sub id='fddwp'></sub></form><legend id='fddwp'></legend><bdo id='fddwp'><pre id='fddwp'><center id='fddwp'></center></pre></bdo></b><th id='fddwp'></th></span></q></dt></tr></i><div id='fddwp'><tfoot id='fddwp'></tfoot><dl id='fddwp'><fieldset id='fddwp'></fieldset></dl></div>
  • <tfoot id='fddwp'></tfoot>

      <small id='fddwp'></small><noframes id='fddwp'>

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

        时间:2023-09-09
          <tbody id='8kFJm'></tbody>
        <legend id='8kFJm'><style id='8kFJm'><dir id='8kFJm'><q id='8kFJm'></q></dir></style></legend>

        1. <small id='8kFJm'></small><noframes id='8kFJm'>

          1. <tfoot id='8kFJm'></tfoot>
            <i id='8kFJm'><tr id='8kFJm'><dt id='8kFJm'><q id='8kFJm'><span id='8kFJm'><b id='8kFJm'><form id='8kFJm'><ins id='8kFJm'></ins><ul id='8kFJm'></ul><sub id='8kFJm'></sub></form><legend id='8kFJm'></legend><bdo id='8kFJm'><pre id='8kFJm'><center id='8kFJm'></center></pre></bdo></b><th id='8kFJm'></th></span></q></dt></tr></i><div id='8kFJm'><tfoot id='8kFJm'></tfoot><dl id='8kFJm'><fieldset id='8kFJm'></fieldset></dl></div>
              <bdo id='8kFJm'></bdo><ul id='8kFJm'></ul>
                • 本文介绍了如何在 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() {
                  
                    }
                  }
                  

                  推荐答案

                  有几种方法可以实现.

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

                  1. 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(数据);});

                  <小时>

                  1. 使用共享服务

                  1. 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

                  <小时>

                  1. 另一种选择是使用 segments 而不是 tabs.这取决于用例.对于简单的应用程序,这将是更好的解决方案.您可以从文档了解更多信息.
                  1. Another option would be to use segments instead of tabs. 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模板网!

                  上一篇:Javascript 将 URL 转换为 BASE64 图像 下一篇:如何在 ionic2 中为 Web 应用程序管理多个滑块?

                  相关文章

                  最新文章

                  <tfoot id='Rn3k8'></tfoot>
                  <i id='Rn3k8'><tr id='Rn3k8'><dt id='Rn3k8'><q id='Rn3k8'><span id='Rn3k8'><b id='Rn3k8'><form id='Rn3k8'><ins id='Rn3k8'></ins><ul id='Rn3k8'></ul><sub id='Rn3k8'></sub></form><legend id='Rn3k8'></legend><bdo id='Rn3k8'><pre id='Rn3k8'><center id='Rn3k8'></center></pre></bdo></b><th id='Rn3k8'></th></span></q></dt></tr></i><div id='Rn3k8'><tfoot id='Rn3k8'></tfoot><dl id='Rn3k8'><fieldset id='Rn3k8'></fieldset></dl></div>

                  1. <legend id='Rn3k8'><style id='Rn3k8'><dir id='Rn3k8'><q id='Rn3k8'></q></dir></style></legend>
                    • <bdo id='Rn3k8'></bdo><ul id='Rn3k8'></ul>

                    <small id='Rn3k8'></small><noframes id='Rn3k8'>