Question

我正在使用模板离子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;

在两种情况下，注入控制器并不是很有帮助

以这种方式打开模态的地方：

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?thread_ts=1537698761.000100&cid=C789G3X1R

编辑v2 更好的解决方案：

在您的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

Answer 1

基于ModalController documentation：

稍后可以使用ViewController的模块关闭或“关闭”模块 dismiss方法。此外，您可以使用pop消除任何覆盖在根导航控制器上。模态不可重用。当模态是撤消它被摧毁。

示例代码：

//主页组件

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

}

如何从该模态中的函数关闭模态？

1 个答案: