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）来自定义模式，以便以任意打开顺序，最后一个模式将在之前打开的模式上打开。

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

1 个答案: