Как добиться модального автоматического увольнения ioni c при нажатии кнопки снаружи или аппаратного возврата - PullRequest
Новая
       17

Как добиться модального автоматического увольнения ioni c при нажатии кнопки снаружи или аппаратного возврата

0 голосов
/ 19 апреля 2020

Привет, я работаю над проектом ioni c, где на главной странице есть кнопка, при нажатии на которую появится модал со слайдером внутри. Теперь, когда я открываю модальное время в первый раз, когда он показывает модал с помощью ползунка, я щелкаю за пределами модального окна, и оно закрывается. Теперь, если снова нажать кнопку, теперь отображается модальный режим, но ползунок больше не работает, он теряет свойство ползунка и пейджер. Что я, возможно, пропустил -

при нажатии кнопки, это код - 

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

1 Ответ

0 голосов
/ 19 апреля 2020

Окончательно решен вопрос, шаги - 1. В modal.page.ts - создана функция загрузки данных в массив для слайдера. И здесь вызывается функция 

ionViewWillEnter() {
    this.loadData();
  }
В файле modal.page. html - Использование отображаемых значений массива ngFor в слайдере.

Теперь каждый раз, когда модал открывается, он загружает данные fre sh, и слайдер работает правильно каждый раз .

...