如何在点击外部或硬件后退按钮时实现离子模式自动关闭

Question

你好，我正在做一个离子项目，在主页上有一个按钮，点击它会出现一个模态，里面有一个滑块。现在，当我第一次打开模态时，它正确地显示了带有滑块的模态，然后我在模态外部单击并关闭了。现在，如果再次单击该按钮，现在会显示模式，但滑块不再起作用，它会丢失滑块属性和寻呼机。我可能错过了什么 --

点击按钮，这是代码 --

this.modalController.create({
      component: VipModalPage,
      cssClass: 'my-custom-modal-css',
      componentProps: {
        uid: event.payload.uid
      }
    }).then(modal => modal.present());

我尝试使用 backdropDismiss: true 但没有成功。

模态滑块代码--

<ion-content>
    <ion-slides [options]="sliderOpts" pager="true" loop="true">
        <ion-slide>
            <ion-img src="../../../assets/images/01.png"></ion-img>
            <h2>Text Heading</h2>
            <p>Text Paragraph</p>
        </ion-slide>
        <ion-slide>
            <ion-img src="../../../assets/images/02.png"></ion-img>
            <h2>Text Heading</h2>
            <p>Text Paragraph</p>
        </ion-slide>
        <ion-slide>
            <ion-img src="../../../assets/images/03.png"></ion-img>
            <h2>Text Heading</h2>
            <p>Text Paragraph</p>
        </ion-slide>
    </ion-slides>
</ion-content>

modalpage.ts --

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-vip-modal',
  templateUrl: './vip-modal.page.html',
  styleUrls: ['./vip-modal.page.scss']
})
export class VipModalPage implements OnInit {

  sliderOpts = {
    initialSlide: 0,
    slidesPerView: 1,
    autoplay: {
      disableOnInteraction: false
    }
  };

  constructor() {
  }

  ngOnInit() {
  }

}

这是css部分--

.my-custom-modal-css .modal-wrapper {
    height: 60%;
    width: 80%;
    top: 20%;
    bottom: 20%;
    left: 10%;
    right: 10%;
    position: absolute;
    display: block;
}

Answer 1

问题终于解决了，步骤-- 1. 在 modal.page.ts -- 创建了一个函数来为滑块加载数组中的数据。并在这里调用函数

ionViewWillEnter() {
    this.loadData();
  }

在modal.page.html -- 在滑块中使用 ngFor 显示数组值。

现在每次打开模式时都会加载新数据，并且滑块每次都能正常工作。

如何在点击外部或硬件后退按钮时实现离子模式自动关闭

How to achieve ionic modal auto-dismiss on clicking outside or hardware back button

modal-dialog

slider

ionic-framework