Как закрыть модальное от функции внутри этого модального? - PullRequest
Новая
       62

Как закрыть модальное от функции внутри этого модального?

0 голосов
/ 23 сентября 2018

Я использую трафаретный ионный pwa, он работает для меня очень хорошо, но теперь я застрял с закрытием модального режима.Как это сделать изнутри?(из модального?) кто-нибудь знает?: D В ионном был контроллер вида, но в этой комбинации (трафарет-ионный) я не могу найти его.

В настоящее время я использую:

  • "@ ionic / core": "4.0.0-beta.11
  • " @ stencil / core ":" 0.12.4 "

Я пробовал 

@Prop({ connect: 'ion-modal-controller' }) modalCtrl: HTMLIonModalControllerElement;

и 

@Prop({ connect: 'ion-menu-controller' }) menuCtrl: HTMLIonMenuControllerElement;

В обоих случаях введенный контроллер не очень полезен Cancel method called from modal

Где модальное окно открывается так: 

this.modalToShow = await this.modalCtrl.create({
    component: 'add-to-inventory-modal'
});
this.modalToShow.present();

Есть идеи?

Спасибо!

Редактировать v1

Пытаясь получить помощь в канале стека, я получил помощь от одного парня.

Временное (я думаю) решение - 

@Element() el: HTMLElement;
closeModal(){
  this.el.closest('ion-modal') as HTMLIonModalElement).dismiss()
}

Ссылка на это обсуждение здесь:

https://stencil -worldwide.slack.com / archives / C789G3X1R / p1537797772000100?Решение:

В вашем modalController: 

@Prop({ connect: 'ion-modal-controller' }) modalCtrl: HTMLIonModalControllerElement;

async openModal() {
  const modalController = await this.modalCtrl.componentOnReady();
  const modal = await modalController.create({
    component: 'my-modal-component',
    componentProps: { modalController },
  });
  await modal.present();
}

И в вашем my-modal-component

@Prop() modalController: HTMLIonModalControllerElement;

async dismiss() {
  await this.modalController.dismiss();
}

Благодаря simonhaenisch

1 Ответ

0 голосов
/ 24 сентября 2018

Основано на документации ModalController :

Модал может быть позже закрыт или "отклонен" с помощью метода ViewController dismiss.Кроме того, вы можете отклонить любое наложение, используя pop на корневом контроллере nav.Модалы не могут быть использованы повторно.Когда модал отклоняется, он уничтожается.

Пример кода:

// Домашний компонент 

 import { Component } from '@angular/core';
 import { ModalController, ViewController } from 'ionic-angular';

    @Component(...)
    class HomePage {

     constructor(public modalCtrl: ModalController) {

     }

     presentContactModal() {
       let contactModal = this.modalCtrl.create(ContactUs);
       contactModal.present();
     }

     presentProfileModal() {
       let profileModal = this.modalCtrl.create(Profile, { userId: 8675309 });
       profileModal.onDidDismiss(data => {
         console.log(data);
       });
       profileModal.present();
     }

    }

// Профиль компонента

@Component(...)
class Profile {

 constructor(public viewCtrl: ViewController) {

 }

 dismiss() {
   let data = { 'foo': 'bar' };
   this.viewCtrl.dismiss(data);
 }

}
...