Ionic：无需Nav Controller，关闭模态框并向原页面传值

当然可以实现！完全不需要依赖NavController.pop()——模态框本身的dismiss()方法就支持携带数据返回前一页，而且不会修改页面栈，完美匹配你“回到已存在的前一页”的需求。

核心实现步骤： #

1. 在模态框组件中携带数据调用dismiss()

当用户完成操作（比如点击确认按钮）时，直接调用viewCtrl.dismiss()并传入你要传递的数据对象，不需要额外调用navCtrl.pop()：

// 模态框组件内的代码
import { ViewController } from 'ionic-angular';

constructor(private viewCtrl: ViewController) {}

onConfirm() {
  // 准备要返回的数据
  const returnData = {
    username: 'testUser',
    selectedOption: 'optionA'
  };
  // 携带数据关闭模态框
  this.viewCtrl.dismiss(returnData);
}

onCancel() {
  // 取消时可以传递null或特定标识，方便前一页判断
  this.viewCtrl.dismiss(null, 'cancel');
}

2. 在前一页订阅模态框的关闭事件接收数据

前一页打开模态框时，通过onDidDismiss()方法订阅模态框关闭的回调，就能拿到返回的数据：

// 前一页组件内的代码
import { ModalController } from 'ionic-angular';
import { YourModalComponent } from './your-modal.component';

constructor(private modalCtrl: ModalController) {}

openModal() {
  const modal = this.modalCtrl.create(YourModalComponent);
  modal.present();

  // 订阅模态框关闭事件，接收返回数据
  modal.onDidDismiss((data, role) => {
    if (role === 'cancel') {
      // 用户取消了模态框，执行取消逻辑
      console.log('用户取消操作');
      return;
    }
    if (data) {
      // 处理从模态框返回的数据
      console.log('收到模态框数据:', data);
      this.localData = data; // 将数据赋值给本地变量使用
    }
  });
}

为什么之前的方法会报错？ #

模态框是独立于页面栈的覆盖层，不属于页面栈的一部分。当你调用this.navCtrl.pop()时，当前活跃的上下文是模态框，而不是页面栈中的页面，此时页面栈可能没有可弹出的页面，就会触发“无页面可弹出”的错误。正确的做法是仅用dismiss()关闭模态框，同时通过它传递数据，前一页通过订阅回调接收即可。

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