将数据从 ionic popover / modal 传回调用页面答案

【问题标题】：Pass data from the ionic popover / modal back to the calling page将数据从 ionic popover / modal 传回调用页面
【发布时间】：2017-06-29 22:27:38
【问题描述】：

假设用户在弹出框/模态页面上以一个小表单（几个单选按钮）提供了详细信息，我想要一种简单的方法将这些数据传递回调用弹出框/模态页面的页面。我知道dismiss 方法存在，onDidDismiss 函数可以进一步使用。

如何在不自动关闭离子弹出框的情况下实现它？（点击适当的选项后应该会出现更改）

我们是否有任何简单的替代方法来将数据传递到调用页面？

【问题讨论】：

onclose 是自动为控件生成的，然后你使用一些技术来处理这个事件，但是你会怎么做呢？
我宁愿寻找一些可以交替传递此类数据的解决方案（没有本机 Ionic 方法）。例如使用 Subject 或 BehaviorSubject 但我不知道如何正确实现它。

标签： javascript angular ionic2

【解决方案1】：

我的回复可能会迟到，但我希望它对以后的人有所帮助。

根据 Ionic 3 docs，the dismiss() 方法可以接受一个参数，并且onDismiss() 方法可以在解除弹出框后返回该数据。如下所示，在调用弹出框的页面上：

  presentPopover(myEvent) {
let popover = this.popoverCtrl.create(PopOverPage);
popover.present({
  ev: myEvent,
});

popover.onDidDismiss(res => {
  console.log('Results: ', res);
});

}

并在弹出页面上包含onDismiss()方法上的参数

  close() {
this.viewCtrl.dismiss('Hello world');

}

“结果”控制台将从弹出页面返回结果。

我希望这对那些仍在使用 Ionic 3 的人有所帮助。

【讨论】：

在 ionic 4 中现在是 popover.onDidDismiss().then(res => {

【解决方案2】：

在模态中，在关闭模态时使用以下导航

 close() 
 {
     this.navCtrl.push(NewPage, { code: 1 });
 }

然后你可以使用 navparams 从新页面获取数据

 import { NavParams, ......} from 'ionic-angular';
 .
 .
 .
 this.code = navParams.get('code');

【讨论】：

【解决方案3】：

您可以使用调用者页面作为模式的参数。然后从第一页调用一个公共方法。这是一个例子：

export class HomePage {

  public showNumber: number;

  constructor(public navCtrl: NavController,
              public modalController: ModalController) {
    this.showNumber = 0;
  }

  public testModal(): void {
    let modal = this.modalController.create(Modal, {homePage:this});
    modal.present();
  }

  public increaseShowNumber() {
    this.showNumber += 1;
  }
}

@Component({
  selector: 'page-modal',
  template: '<button (click)="increaseCallerNumber()">Increase</button> '
})
export class Modal {
  private homePage:HomePage;
  public constructor(params: NavParams) {
    this.homePage = params.get('homePage');
  }

  public increaseCallerNumber():void{
    this.homePage.increaseShowNumber();
  }
}

【讨论】：

在app.module.ts中注册页面怎么样？从同一路径导入 2 个组件时会出错。