在模态上显示模态，但第二个模态正在关闭自身。离子 3

Question

我正在使用 Ionic 3，并且正在尝试在另一个模式上打开一个模式。第一个模态显示一个已经填充的表单，如果用户想要删除所有数据，它将打开另一个模态请求理由。第二个模态在没有任何点击或用户交互的情况下自行关闭。

什么可能导致这个错误？

这里调用了第一个模态：

Calendario.ts

openEvento(evento){
      let modal = this.modal.create(EventoPage, {'evento': evento, 'isNewEvent': false }, {cssClass: "modalevento"});
      modal.present();
} 

在 Evento.ts 中，我称之为第二个模式。

private deletarEvento() {
        let modal = this.modal.create(JustificativaPage, {}, { cssClass: 'modal-justificativa'});
        modal.onDidDismiss(data => {
            console.log(data);
        })
        modal.present();
}

JustificativaPage 显示并自行关闭。 这是 JustificativaPage.ts 的代码

export class JustificativaPage{
    private justificativa: string = "";
    constructor(private viewCtrl: ViewController){}
    solicitar(){
        if(this.justificativa == ""){ }
        else{
            console.log(this.justificativa)
            this.viewCtrl.dismiss(this.justificativa);
        }        
    }
    modalDismiss(){
        this.viewCtrl.dismiss();
    }
}

JustificativaPage.html

<ion-header>
    <ion-label>Deseja Solicitar Cancelamento?</ion-label>
     <button class="dismiss-button" (click)="modalDismiss()">
            <ion-icon name="ios-close-outline"></ion-icon>
        </button>
</ion-header>

<ion-content padding>
    <h5>Digite abaixo o motivo do cancelamento</h5>
    <form (ngSubmit) = "solicitar()">
        <ion-item>
            <ion-label stacked>Justificativa</ion-label>
            <ion-textarea [(ngModel)]="justificativa" name="justificativa" placeholder="Digite aqui o motivo do cancelamento do evento"></ion-textarea>
        </ion-item>
        <button ion-button color="danger">Fechar</button>
        <button type="submit" ion-button color="primary">Solicitar</button>
    </form>
</ion-content>

Answer 1

您必须在创建模式时添加 enableBackdropDismiss 选项来更新您的代码，如下所示：

let modal = this.modal.create(EventoPage, {'evento': evento, 'isNewEvent': false }, { enableBackdropDismiss: false, cssClass: "modalevento"});
let modal = this.modal.create(JustificativaPage, {}, { enableBackdropDismiss: false, cssClass: 'modal-justificativa'});

更多详情，请查看此文档链接https://ionicframework.com/docs/api/components/modal/ModalController/#advanced

请注意，当打开多个模式时，它们会被附加到 DOM。因此，您首先打开哪个模式，它将首先附加到 DOM。

此外，所有模态都具有相同的 css，因此后面的模态隐藏在第一个模态后面。

您需要通过覆盖每个模态的默认 CSS（即 z-index）来自定义模态，这样无论以何种顺序打开它们，最后一个模态都会在之前打开的模态上打开。