Question

我正在尝试添加一个弹出窗口，当用户开始在表单中填充数据时，该弹出窗口将显示在页面上，然后他决定转到应用程序中的其他位置。

此弹出窗口将显示以下消息：“您要离开此页面并保存更改吗？” 有三个按钮：离开前离开，离开和保存。我是离子逻辑的新手，我无法弄清楚如何做到这一点。

我开始在页面中添加一个显示弹出窗口的按钮（例如，当用户点击侧边栏的任何链接时，仍然不知道如何触发事件）。当用户点击该按钮时，弹出窗口会显示三个按钮。

问题是我不知道如何实现这些按钮的处理程序。

这就是我在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>

Answer 1

你应该利用生命周期钩子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的例子，它定义了页面是否具有我们不希望用户自由离开的状态＆＃34;。

然后我们使用promise来确保用户不能在不回答对话选项的情况下离开，我们等待他们的答案来定义生命周期钩子是否得到真/假标志以继续。

请注意，这个生命周期只能在＆＃34;踢出＆＃34;当一个视图（页面）离开堆栈（弹出）时，如果你要推入一个新的视图 - 它不会保护它。但是在这种情况下，新推入的页面无论如何都不会破坏表单中的用户数据，一旦你解除了新推送的页面，用户就可以安全地返回它。

希望这有帮助。

在离子3中添加请假或留在页面提醒？

1 个答案: