在使用ionic4做开发的时候遇到了这么一个需求,用户可以从购物车页面进入订单页面,然后从订单页面进入支付页面,但当用户在支付页面点击手机返回按键时,直接返回购物车页面(跳过订单提交页面)。
目前创新互联公司已为上1000+的企业提供了网站建设、域名、虚拟主机、网站运营、企业网站设计、连山网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
正常情况下,ionic的页面显示和返回是入栈和出栈的过程,当打开一个新页面时,这个新页面便被push到页面栈中,当点击返回按钮时,这个栈顶页面出栈。
在ionic3中,提供了NavController.RemoveView
方法,实现需求功能,如下代码即可实现。
//记录当前页面对象
let actionView = viewService.getActive();
//打开新页面
await viewService.Push(page, context, { animate: false });
//从页面栈中删除记录页面
await viewService.RemoveView(actionView);
在ionic4中NavController
的api发生了很大的变化,移除了RemoveView
的方法,仅提供了navigateForward、back、pop
等简单的api。
ionic4
推荐使用angular
本身的路由策略,即使用Router
进行路由。在使用router.navigateByUrl()
方法跳转页面时,只需配置replaceUrl
的属性值为true
,新打开的页面会替代当前页面。
this.router.navigateByUrl('order/order-pay', { replaceUrl: true });
最终的html结构如下图。由html结构可知,订单提交页被订单支付页面替换,点击返回按钮,回到购物车页面。