將數據從離子彈出/模態傳遞回調用頁面

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的用戶有所幫助。