从不完整的地方返回时显示警报或模态

Question

我创建了一个包含用户名字段和保存按钮的表单。如果我们在用户名字段中键入内容并单击后退按钮而不保存，我的表单应显示警告框或模式窗口询问您是否真的要离开页面？

我发现这个article但需要更通用的东西。

form.html

<ion-header>
<ion-navbar>
<ion-title> Data </ion-title>
</ion-navbar>
</ion-header>

<ion-content>
<form (ngSubmit)="dataForm(data)" #data="ngForm">
<ion-item>
<ion-input type="text" name="name" #name="ngModel" required></ion-input>
</ion-item>
<button ion-button large type="submit">Save</button>
<form>
</ion-content>

我正在使用ionic2 typescript和angular2。

Answer 1

您可以使用ionViewCanLeave() lifecycle hook在用户尝试离开页面时显示警报，请执行以下操作：

public canLeave: boolean = false; // Create a property in your component

ionViewCanLeave(){
  if(!thiscanLeave){ // IF canLeave IS FALSE ENTER THE IF STATEMENT TO CONFIRM IF THE USER WANTS TO LEAVE THE PAGE. IF IT'S TRUE RETURN TRUE SAYING IT CAN LEAVE.
    if(confirm("Do you really want to leave?")){
      this.canLeave = true; // YOU'LL NEED TO SET YOUR PROPERTY TO TRUE WHENEVER YOU NEED TO LEAVE THE PAGE, BEEING A POP, PUSH OR SETROOT.
      this.navCtrl.pop();
    };
  };
  return true;
}

这样，它将始终检查用户是否可以离开页面。

由于您没有使用Angular的FormBuilder来检查用户是否在表单中输入了某些内容（您只想警告用户是否有不完整的表单，如果没有输入任何内容，则无需提醒他）您可以创建一个简单的函数，将你的canLeave设置为false，如：

你的.TS

public canLeave: boolean = true;

你的HTML

<ion-item>
<ion-input type="text" name="name" #name="ngModel" required(input)="canLeave = false"></ion-input>

希望这可以帮助。