Ionic弹窗确认后如何实现ion-back-button同等返回效果

<ion-back-button>的默认返回逻辑本质是调用Ionic路由栈的出栈操作，不需要硬编码邮件列表页的跳转路径，否则会出现路由栈混乱、转场动画和原生返回不一致的问题，具体实现步骤如下：

1. 修正依赖注入 #

你现有代码存在两个基础问题：

• 构造函数里的修饰符privates是拼写错误，正确写法是private
• 需要注入Ionic官方提供的NavController，这个服务封装了和<ion-back-button>完全一致的路由返回逻辑，自动适配转场动画、路由栈规则。

修正后的TS头部导入和构造函数代码：

import { Component, OnInit } from '@angular/core';
import { AlertController, NavController } from '@ionic/angular';

@Component({
  selector: 'app-create-email',
  templateUrl: './create-email.page.html',
  styleUrls: ['./create-email.page.scss'],
})
export class CreateEmailPage implements OnInit {

  constructor(
    private alertCtrl: AlertController,
    private navCtrl: NavController
  ){}

2. 完善删除弹窗的确认回调 #

在删除确认按钮的handler中，先执行删除草稿的业务逻辑（如果有），再调用navCtrl.pop()即可实现和左上角返回按钮100%一致的返回效果。另外建议给取消按钮加上role: 'cancel'，适配点击弹窗蒙层、按手机物理返回键关闭弹窗的场景。

修正后的showDelete方法代码：

async showDelete(){  
  const deleteAlert = await this.alertCtrl.create({
    header: "删除当前消息？",
    message: "确认要删除正在编辑的邮件内容吗？",
    buttons: [
      {
        text: "取消",
        role: 'cancel'
      },
      {
        text: "确认删除",
        handler: () => {
          // 此处可添加删除临时草稿、清空编辑缓存的业务逻辑
          this.navCtrl.pop();
        }
      }
    ]
  });
  deleteAlert.present();
}

方案说明 #

• 不要用Router.navigate硬跳邮件列表路径：这种方式会把列表页重新压入路由栈，用户跳回列表后再点系统返回键会回到当前撰写页，不符合返回操作的预期
• NavController.pop()是<ion-back-button>内部调用的原生方法，不管你是从哪个入口进入的邮件撰写页，都能正确返回上一个停留页面，转场动画和点击左上角返回按钮完全一致，没有体验差异。

内容的提问来源于stack exchange，提问作者ktronchon