Ionic 2-从模态中获取数据

Question

我有一个组件，它是我的主接口。在这个组件中，点击一个按钮打开ionic 2模态，可以选择项目。

我的模式页面(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中找不到任何关于模态和组件之间通信的文档。

Answer 1

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

在您的主要接口组件中

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

在您的模式页面中，

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

此处的模式控制器链接

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