Закрыть модал в Ionic 4 кнопкой "Назад" - PullRequest
Новая
       5

Закрыть модал в Ionic 4 кнопкой "Назад"

0 голосов
/ 21 октября 2018

У меня есть Модальный в Ионный 4 .Я бы хотел закрыть это, когда пользователь нажимает кнопку назад на своем мобильном телефоне (или кнопку назад в своем браузере).

Кто-нибудь знает, какЯ могу это сделать?

РЕДАКТИРОВАТЬ: Подробнее:

У меня есть кнопка, которая открывает мой модальный: 

async onClick() {
  const modal = await this.modalController.create({
    component: Foo,
  });
  return await modal.present();
}

Компонент Fooне имеет намного больше контента, чем кнопка, закрывающая модальный режим: this.modalController.dismiss();.Пока все хорошо.

Однако на моем мобильном телефоне приложение закрывается, когда модальное окно открыто, и пользователь нажимает кнопку возврата на мобильном телефоне.Но в этом случае должен закрываться только модал.

Ответы [ 3 ]

0 голосов
/ 22 октября 2018

Ответ Энола помог мне найти решение, спасибо за это.

platform.registerBackButtonAction больше не существует в v4.Я попытался platform.backButton.subscribe вместо этого, но это не сработало.Что работает так: 

private backbuttonSubscription: Subscription;

constructor(private modalCtrl: ModalController) {

ngOnInit() {
    const event = fromEvent(document, 'backbutton');
    this.backbuttonSubscription = event.subscribe(async () => {
        const modal = await this.modalCtrl.getTop();
        if (modal) {
            modal.dismiss();
        }
    });
}

ngOnDestroy() {
    this.backbuttonSubscription.unsubscribe();
}
0 голосов
/ 20 февраля 2019

Да, почти в пути .... вам просто нужно изменить в части HTML.Я так и сделал. 

<ion-header>
    <ion-toolbar>
      <ion-buttons slot="start">
          <ion-button color="dark" (click)="closeModal()">
              <ion-icon name="arrow-back"></ion-icon>
            </ion-button>
      </ion-buttons>
     <ion-title>Create Pin</ion-title> 
    </ion-toolbar>
  </ion-header>

после этого вам просто нужно создать функцию, которая закроет ваше модальное всплывающее окно.в вашем файле ts 

closeModal() {
    this.modalCtrl.dismiss();
  }

Я надеюсь, что это поможет вам.

0 голосов
/ 22 октября 2018

Вы можете использовать метод registerBackButtonAction, который содержится в сервисе Platform.Этот метод позволяет переопределить стандартное действие по умолчанию для кнопки возврата оборудования.Метод принимает функцию обратного вызова в качестве параметра, где вы можете реализовать свою логику.В итоге вы должны сделать следующее:

  • Внедрить службу Platform в компонент Foo.
  • Вызвать registerBackButtonAction в ngOnInit (или другом методе init) и передать функциюобратный вызов в качестве параметра, который выполняет логику для закрытия модального (this.modalController.dismiss();)
  • Очистить действие, когда модальный компонент закрыт (например, в методе ngOnDestroy).Для этого registerBackButtonAction возвращает функцию, при вызове которой действие удаляется.

Код должен выглядеть примерно так: 

constructor(private platform: Platform) {
    ...
}

ngOnInit() {
    this.unregisterBackAction = this.platform.registerBackButtonAction(() => {
        this.modalController.dismiss();
    })
}

ngOnDestroy() {
    if(this.unregisterBackAction) this.unregisterBackAction();
}
...