Question

我有一个组件，这是我的主要界面。在此组件内，单击按钮可打开离子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);
}

模态控制器链接here

Answer 2

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

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

Ionic 2 - 从模态中获取数据

2 个答案: