Ionic 2 - 从模式中获取数据答案

【问题标题】：Ionic 2 - Get data back from modalIonic 2 - 从模式中获取数据
【发布时间】：2018-04-23 22:47:28
【问题描述】：

我有一个组件，它是我的主界面。在这个组件中，点击一个按钮会打开允许选择项目的 ionic 2 modal。

我的模态页面（itemsPage）：

..list of items here

    <button ion-button [disabled]="!MY_TURN || !selectedItem || !selectedItem.quantity"
       (click)="useItem(selectedItem)">
        <span>Choose item {{selectedItem?.name}}</span>
      </button>

useItem() 应该：

将商品数据发送到我的主界面组件
关闭模态
在我的主界面中执行一个方法

我如何执行此类操作？找不到任何有关 Ionic 2 中模态和组件之间通信的文档。

【问题讨论】：

离子 2 不支持从模态向组件发送数据。我在页面中使用了一些隐藏部分。

标签： ionic2

【解决方案1】：

这只是在viewController中使用参数的问题。

在你的主界面组件中，

let chooseModal = this.modalCtrl.create(itemsPage);
  chooseModal.onDidDismiss(data => {
     console.log(data);
});
chooseModal.present();

在您的模态页面中，

useItem(item) {   
  this.viewCtrl.dismiss(item);
}

模态控制器链接here

【讨论】：

ViewController 在 v4 中被删除，使用 ModalController 代替。

【解决方案2】：

这是从 ionic 模式中获取数据的一个明显示例。您需要为 modal 的 onDismiss() 添加一个处理程序，然后通过将数据传递给 ViewController 的 dismiss() 方法从 modal 本身返回数据：

// myPage.ts
// Passing data to the modal:
let modal = Modal.create(myModal, { data: [...] });

// Getting data from the modal:
modal.onDismiss(data => {
  console.log('MODAL DATA', data);
 });

this.nav.present(modal);

在模态页面上

// myModal.ts
constructor(private navParams: NavParams, private viewCtrl: ViewController) {
// Getting data from the page:
  var dataFromPage = navParams.get('data');
}

dismiss() {
// Returning data from the modal:
  this.viewCtrl.dismiss(
      // Whatever should be returned, e.g. a variable name:
      // { name : this.name } 
  );
}

【讨论】：

它说“onDismiss”不是一个函数