Ionic 2 - Получить данные от модальных

У меня есть компонент, который является моим основным интерфейсом. Внутри этого компонента нажатие кнопки открывает ионный 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.

Ответы

Ответ 1

Это просто вопрос использования параметров в viewController.

В вашем основном компоненте интерфейса,

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

На вашей модельной странице,

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

Ссылка Modal Controller здесь

Ответ 2

Это явный пример получения данных от модалов в ионных. Вам нужно добавить обработчик для модалов onDismiss(), а затем вернуть данные из самого модала, передав данные методу ViewControllers reject():

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