处理来自第二页的按钮单击事件以确定第一页的结果，离子
处理来自第二页的按钮单击事件以确定第一页的结果，离子
提问于 2018-07-24 21:29:10
我正在使用离子框架来构建我的应用程序，我已经使用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);
}
}回答 2
Stack Overflow用户
回答已采纳
发布于 2018-07-27 00:04:10
我能够解决这个问题，这里有一个很好的教程链接，它帮助我解决了这个问题：https://alligator.io/ionic/events/，我希望这对其他使用离子框架进行开发的人有所帮助。
Stack Overflow用户
发布于 2018-07-26 03:41:21
使用回调函数，例如：
主页
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
});
}
}另一个页面：
export class OtherPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {}
goToPreviousPage() {
this.navCtrl.pop().then(() => {
this.navParams.get('callback')('This is some data');
});
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51499899
复制相关文章
相似问题