如何在Ionic中从模式视图发回参数

在Ionic中，可以通过使用路由参数来从模态视图返回参数。以下是一种实现方法：

首先，在打开模态视图时，传递参数给模态视图的组件。可以使用Ionic的ModalController服务的create方法来创建模态视图，并通过传递参数给create方法的第一个参数来传递参数。例如：

async openModal() {
  const modal = await this.modalController.create({
    component: ModalPage,
    componentProps: {
      param: 'Hello from parent page'
    }
  });
  await modal.present();
}

在模态视图的组件中，接收传递的参数。可以通过NavParams服务来获取传递的参数。在构造函数中注入NavParams，并使用get方法来获取参数。例如：

import { NavParams } from '@ionic/angular';

constructor(private navParams: NavParams) {}

ngOnInit() {
  const param = this.navParams.get('param');
  console.log(param); // 输出 'Hello from parent page'
}

在模态视图中，当需要返回参数给父页面时，可以使用ModalController的dismiss方法。在dismiss方法的参数中传递需要返回的参数。例如：

returnData() {
  const data = {
    result: 'Data from modal'
  };
  this.modalController.dismiss(data);
}

在父页面中，可以通过监听模态视图的dismiss事件来获取返回的参数。在打开模态视图时，使用await关键字来等待模态视图关闭，并使用then方法来获取返回的参数。例如：

async openModal() {
  const modal = await this.modalController.create({
    component: ModalPage,
    componentProps: {
      param: 'Hello from parent page'
    }
  });
  await modal.present();

  modal.onDidDismiss().then((data) => {
    console.log(data); // 输出 { data: { result: 'Data from modal' }, role: 'backdrop' }
    console.log(data.data.result); // 输出 'Data from modal'
  });
}

通过以上步骤，你可以在Ionic中从模态视图返回参数。请注意，以上示例中的ModalPage是模态视图的组件名称，你需要根据实际情况进行替换。