добавить оставить или остаться на странице оповещения в ionic 3? - PullRequest
Новая
       8

добавить оставить или остаться на странице оповещения в ionic 3?

0 голосов
/ 08 июня 2018

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

Это всплывающее окно покажетэто сообщение: «Вы хотите покинуть эту страницу и сохранить изменения?»доступны три кнопки: «Оставаться», «Выходить» и «Сохранить» перед отъездомЯ новичок в ионной логике, и я не мог понять, как это сделать.

Я начал с добавления кнопки на странице, которая показывает всплывающее окно (Все еще не знаю, как вызвать событие, когдапользователь нажимает на любую ссылку на боковой панели, например).когда пользователь нажимает на эту кнопку, всплывающее окно отображается с тремя кнопками.

Проблема в том, что я не знаю, как реализовать обработчики этих кнопок.

Это то, что у меня есть в файле ts: 

leaveOrStayModal() {
   let e = event || window.event;
   e.stopPropagation();
   this.alertMixin.presentAlert(
  'Do you want to leave this site?\n',
  "You haven't saved your changes!",
  'Stay',
  'Leave',
  'Save',
  null,
  () => {
    console.log('leave handler')
    // this.navCtrl.push()  Here I don't know how to get the exact link clicked from the sidebar ? to go to 
  },
  () => {
    console.log('Save handler') 
 //here I want to save the form ?
  }
 )
 }

всплывающий код: 

presentAlert(title: string, message: string, btnOneText: string, btnTowText: string, btnThreeText: string,
                      btnOneHandler?: () => void, btnTowHandler?: () => void, btnThreeHandler?: () => void,
                      present: boolean = true) {
     let confirm = this.alertCtrl.create({
     title: title,
     message: message,
     buttons: [
      {
      text: btnOneText,
      handler: () => {
        if (btnOneHandler) {
          btnOneHandler();
        }
      }
     },
    {
      text: btnTowText,
      handler: () => {
        if (btnTowHandler) {
          btnTowHandler();
        }
      }
     },
     {
      text: btnThreeText,
      handler: () => {
        if (btnThreeHandler) {
          btnThreeHandler();
        }
      }
    }
  ]
});
 if (present) {
   confirm.present().then();
 }
 return confirm;

}

И эта кнопка показывает всплывающее окно (подлежит удалению) 

<button ion-button icon-left item-right type="button" (click)="leaveOrStayModal()"> Click to show modal </button>

1 Ответ

0 голосов
/ 08 июня 2018

Для этого вы должны использовать ловушку жизненного цикла ionViewCanLeave.Некоторая базовая документация здесь: https://ionicframework.com/docs/api/navigation/NavController/

Для вашего контекста я просто набросал способ, которым я бы это сделал (это немного грязно): 

userCanLeave = false;
ionViewCanLeave() {
// here you can use other vars to see if there are reasons we want to keep user in this page:
  if (!this.userCanLeave) {
      return new Promise((resolve, reject) => {
        let alert = this.alertCtrl.create({
          title: 'Are you sure?',
          message: 'The form data may be lost',
          buttons: [
            {
              text: 'Stay',
              role: 'cancel',
              handler: () => {
                console.log('User stayed');
                this.userCanLeave = false;
                reject();
              }
            },
            {
              text: 'Leave',
              handler: () => {
                console.log('User leaves');
                this.userCanLeave = true;
                resolve();
              }
            },
            {
              text: 'Save',
              handler: () => {
                console.log('User saved data');
                // do saving logic
                this.userCanLeave = true;
                resolve();
              }
            }
          ]
        });
        alert.present();
      });
    } else { return true }
  }

userCanLeave - вот лишь примерvar, который определяет, имеет ли страница состояние, в котором мы не хотим, чтобы пользователь оставлял «свободно».

, тогда мы используем обещание, чтобы гарантировать, что пользователь не может выйти, не отвечая на опции диалога, мы ждем его ответовопределить, получает ли хук жизненного цикла флаг true / false для продолжения.

Обратите также внимание, что этот хук жизненного цикла «включается» только тогда, когда представление (страница) выходит из стека (всплывающих окон), если вы нажметеновый взгляд - он не будет охранять это.Но в этом случае новая введенная страница не будет в любом случае уничтожать данные пользователя в форме, и пользователь может безопасно вернуться к ней, как только вы отклоните недавно добавленную страницу.

Надеюсь, это поможет.

...