Question

我正在使用Ionic Framework来构建我的应用程序，并且使用navPush和navPop来控制两页之间的导航，并且已经能够使用navPush将参数从第一页发送到第二页。但是，我不确定如何处理按钮单击，这不仅会跳回到上一页（第一页），还会导致某些功能在第一页上运行。例如，如果要按（第二页）上的地图按钮，它将在地图页（第一页）上显示当前位置和所选标记之间的折线。我已经具有显示标记和当前位置之间的折线的功能，是否有一种方法可以弹出选中标记的页面并调用特定功能的命令？

SecondPage.ts：

  import { Component, ViewChild } from '@angular/core';
  import { NavController, NavParams, Navbar} from 'ionic-angular';
  import { CallNumber } from '@ionic-native/call-number';
  import { Toast } from '@ionic-native/toast';
  /**
  * Generated class for the ListPage page.
  *
  * See https://ionicframework.com/docs/components/#navigation for more info on
  * Ionic pages and navigation.
  */
  @Component({
  selector: 'page-list',
  templateUrl: 'list.html',
  })
  export class ListPage {
  @ViewChild(Navbar) navBar: Navbar;
  places: any = [];

  constructor(public navCtrl: NavController, public navParams: NavParams,
    private callNumber: CallNumber, private toast: Toast) {
    this.places = [];
  }

  ionViewDidLoad() {
    this.navBar.backButtonClick = (e:UIEvent)=>{
      this.navCtrl.pop({animate: true, animation: "transition", direction: "down", duration: 300});
    };
    this.places = this.navParams.get('places');
    this.places.sort(function(a, b) {
      return parseFloat(a.distance.substring(0, a.distance.indexOf(' ')))
     - parseFloat(b.distance.substring(0, b.distance.indexOf(' ')))});
  }

  phoneDial(phone_number) {
    this.toast.show("Calling Number.", '3000', 'center');
    this.callNumber.callNumber(phone_number, true);
  }
}

Answer 1

您正在调用ListPage的页面（来源），您有类似这样的内容...

openModal（atividade）{ 让窗口= this.modalCtrl.create（“ L3E1AtivModalPage”，{名称：atividade.name，conteudo：atividade.conteudo，data：atividade.data，tipo：atividade.tipo，id：atividade.id，conclido：atividade.concluido} ）;

您必须在...之后添加类似的内容

AMI

atividade 是我在原始页面上拥有的数组，因此我收到了该页面在关闭前所具有的参数。

Answer 2

使用回调函数，例如：

主页

override

另一页：

export class MainPage {
  dataFromOtherPage = null;

  callback = data => {
    this.dataFromOtherPage = data;
    console.log('data received from other page', this.dataFromOtherPage);
  };

  constructor(public navCtrl: NavController) {}

  openOtherPage() {
    this.navCtrl.push('OtherPage', {
      callback: this.callback
    });
  }
}

Answer 3

我能够弄清楚，这是一个可以帮助我弄清楚教程的很好的链接：https://alligator.io/ionic/events/，我希望这可以帮助其他人使用离子框架进行开发。

处理第二页中的按钮单击事件以确定第一页中的结果Ionic

3 个答案: