如何在ionViewWillLeave方法中阻止页面关闭并弹出退出确认提示

ionViewWillLeave 是Ionic的页面生命周期通知钩子，本身无法直接中断页面离开流程，你需要搭配Angular的CanDeactivate路由守卫实现需求，完整步骤如下：

1. 新增表单修改状态标记 #

在页面组件中新增变量标记表单是否有未保存的修改，监听表单变更更新状态：

// 页面组件类内定义
isFormUnsaved = false;

// 监听表单值变更（以响应式表单为例，模板驱动表单可在input事件中更新状态）
ngOnInit() {
  this.form.valueChanges.subscribe(() => {
    this.isFormUnsaved = true;
  })
}

2. 封装确认弹窗Promise方法 #

把Toast确认逻辑封装为返回布尔值的Promise方法，用于判断用户是否允许离开页面：

// 页面组件类内新增方法
async confirmBeforeLeave(): Promise<boolean> {
  // 表单无未保存修改直接允许离开
  if (!this.isFormUnsaved) return true;

  return new Promise((resolve) => {
    this.toast.toastError('voulez-vous sauvegarder vos modifications?', 20000, [
      {
        side: 'end',
        text: 'Oui',
        handler: () => {
          // 此处写入你的表单保存逻辑
          this.saveFormData().then(() => {
            this.isFormUnsaved = false;
            resolve(true); // 保存完成后允许离开
          })
        }
      },
      {
        side: 'end',
        text: 'Non',
        handler: () => {
          this.isFormUnsaved = false;
          resolve(true); // 放弃保存直接允许离开
        }
      },
      {
        side: 'start',
        text: '取消',
        handler: () => {
          resolve(false); // 中断离开，停留在当前页面
        }
      }
    ]);
  })
}

3. 实现CanDeactivate路由守卫 #

新建路由守卫文件，关联页面组件的确认方法：

// unsaved-form.guard.ts
import { CanDeactivate } from '@angular/router';
import { Injectable } from '@angular/core';
// 替换为你实际的页面组件导入路径
import { YourPageComponent } from './your-page.component';

@Injectable({
  providedIn: 'root'
})
export class UnsavedFormGuard implements CanDeactivate<YourPageComponent> {
  async canDeactivate(component: YourPageComponent): Promise<boolean> {
    return await component.confirmBeforeLeave();
  }
}

4. 路由绑定守卫 #

在路由配置中给对应页面绑定刚实现的守卫：

// app-routing.module.ts 或对应模块的路由配置文件
const routes: Routes = [
  {
    path: 'your-page-path',
    component: YourPageComponent,
    canDeactivate: [UnsavedFormGuard]
  }
];

补充说明：如果你的页面是通过Ionic模态框（Modal）打开的，不需要路由守卫，直接在模态框的关闭触发逻辑中调用确认方法判断即可。

内容的提问来源于stack exchange，提问作者TERGEMINA Jérémie