将数据从离子弹出/模态传递回调用页面

Question

假设用户在弹出框/模式页面上以较小的形式（很少的单选按钮）提供了详细信息，我希望有一种简单的方法将数据传递回称为弹出框/模式的页面。 我知道存在方法dismiss ，并且可以进一步使用onDidDismiss函数。

如何在不自动关闭离子弹出窗口的情况下实现它？ （更改应在单击适当的选项后立即出现）

除了dismiss方法，我们还有其他简单的方法可以将数据传递到调用页面吗？

Answer 1

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

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();
  }
}

Answer 2

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

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

那么您可以使用navparams从新页面获取数据

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

Answer 3

我的回复可能已经晚了，但我希望它将对以后的人有所帮助。

根据Ionic 3 docs的介绍 ， the dismiss()方法可以接受参数，并且onDismiss()方法可以the dismiss()弹出窗口后返回该数据。 如下所示，在称为弹出窗口的页面上：

  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的用户有所帮助。