Typescript Ionic 3块backbutton事件

我想截获后退按钮事件。 只要调用了侦听器，就已经触发了返回信号

这就是我所尝试的：

 document.addEventListener("backbutton", () => {
       console.log("[WARN] BackBtn pushed");
       console.log("TextboxVal: " + this.inputValue);
       this.showConfirm();
       document.removeEventListener("backbutton");
     });

我不想丢失“this.inputValue”值。 但在大多数情况下，它已经消失了

---

我想在离开页面之前显示一个警报

您可以使用：

在某些情况下，开发人员应该能够控制视图的离开和关闭 套房。为此，

NavController

具有

ionViewCanEnter

和

ionViewCanLeave

方法。类似于有棱角的路线守卫，但 与

导航控制器

的集成度更高

---

我就是这样一个人做的：

constructor(public plt: Platform) {
    //Catch BackBTN Event
        plt.ready().then( ()=> {
          plt.registerBackButtonAction( ()=> {
            this.showConfirm();
          })
        });​
}

showConfirm() {
      let confirm = this.alertCtrl.create({
        title: this.confirm,
        message: this.confirm_msg,
        buttons: [
          {
            text: this.disagree,
            handler: () => {
              console.log("Saved changes");
              this.dismiss();
            }
          },
          {
            text: this.agree,
            handler: () => {
              console.log("Discard changes");
              this.viewCtrl.dismiss();
            }
          }
        ]
      });
      confirm.present();
    }
  }

---

有了它，我可以设置自己的自定义BackBTN方法。

您可能需要考虑cookie和反应式表单。这样，如果您移开并返回状态，则可以保留该状态。Angular大学的Vasco在他的RxJS教程视频中对此做了一些介绍。请看，实际上，它使用form.valueChanges，并在窗体处于有效状态时使用筛选器设置cookie。有几种方法可以解决此问题，但我不确定您的要求是什么。您可以a）将该值存储在存储器中，这样当用户返回页面时，该值就会出现b）在离开页面之前显示警报，如果用户仍想离开，请清除该输入并返回上一页。如果这些方法可行，请告诉我，我将添加一个更详细的答案。我希望在离开页面之前显示一个警报。这种方法的问题是，将为所有页面设置该行为，而不仅仅是在该页面中。您可以尝试取消注册自定义后退按钮处理程序，但有时当从堆栈中推/弹出多个页面时，会导致应用程序中出现一些错误。

constructor(public plt: Platform) {
    //Catch BackBTN Event
        plt.ready().then( ()=> {
          plt.registerBackButtonAction( ()=> {
            this.showConfirm();
          })
        });​
}

showConfirm() {
      let confirm = this.alertCtrl.create({
        title: this.confirm,
        message: this.confirm_msg,
        buttons: [
          {
            text: this.disagree,
            handler: () => {
              console.log("Saved changes");
              this.dismiss();
            }
          },
          {
            text: this.agree,
            handler: () => {
              console.log("Discard changes");
              this.viewCtrl.dismiss();
            }
          }
        ]
      });
      confirm.present();
    }
  }