Angular中如何将组件数据传入路由Guard实现表单未保存跳转前确认提示

1. 定义通用的未保存校验接口 #

为了让路由Guard能统一调用组件内的表单修改检查逻辑，先定义一个公共接口，可放在Guard同目录下：

export interface CanComponentDeactivate {
  // 与你已在UserEditorComponent中实现的表单修改检查方法签名对齐即可
  hasUnsavedChanges(): Observable<boolean> | Promise<boolean> | boolean;
}

之后给UserEditorComponent实现这个接口即可，不需要改动你已写好的检查逻辑。

2. 改造路由Guard代码 #

调整Guard的类型关联，加入弹窗调用逻辑：

import { Injectable } from '@angular/core';
import { CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
// 替换为你项目中已实现的确认弹窗服务路径
import { YourConfirmDialogService } from 'src/app/xxx/your-confirm-dialog.service';
import { CanComponentDeactivate } from './can-deactivate.interface';

@Injectable({
  providedIn: 'root'
})
export class RouterGuardGuard implements CanDeactivate<CanComponentDeactivate> {
  // 注入现成的弹窗服务
  constructor(private confirmDialog: YourConfirmDialogService) {}

  canDeactivate(
    component: CanComponentDeactivate,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState?: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    const hasUnsavedChanges = component.hasUnsavedChanges();
    // 无未保存修改直接放行
    if (!hasUnsavedChanges) {
      return true;
    }
    // 有未保存修改时弹出确认框，直接返回弹窗的布尔结果流即可
    // 假设你的弹窗confirm方法返回Observable<boolean>：确认离开返回true，取消导航返回false
    return this.confirmDialog.confirm('当前页面存在未保存的修改，确认要离开吗？');
  }
}

3. 路由配置无需改动 #

你已在app-routing-module.ts中写的配置完全符合要求，不需要调整。

兼容说明 #

• 如果你的表单检查方法是异步逻辑（比如需要调用后端接口比对修改），直接返回对应的Observable/Promise即可，Guard本身原生支持异步返回值
• 后续其他需要做未保存修改校验的页面，只要实现CanComponentDeactivate接口，都可以复用这个Guard

内容的提问来源于stack exchange，提问作者TreyBCollier