Question

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

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

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

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

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

根据离子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的人有所帮助。

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

3 个答案: