Angular中如何拦截当前页面操作时的路由跳转并添加确认弹窗

我来帮你搞定这个问题！你之前尝试的两种方法都有各自的局限，Angular官方推荐用**CanDeactivate守卫**来处理路由离开前的确认逻辑，既能阻止未确认的跳转，又能自定义你的模态框。

为什么之前的方法行不通？ #

先给你分析下之前尝试的问题：

• 第一种监听NavigationStart事件：这个事件是在路由导航已经启动后才触发的，此时跳转流程已经开始，没法阻止页面跳转，所以弹窗出来的时候页面已经变了。
• 第二种window:beforeunload：这个事件只针对浏览器刷新、关闭窗口或者跳转到外部网站的场景，Angular内部的路由跳转不会触发它，而且它只能调用浏览器自带的确认弹窗，没法用你自定义的模态框。

正确实现方案 #

1. 创建CanDeactivate守卫服务 #

首先定义一个守卫，用来拦截路由离开请求，并调用组件内的确认逻辑：

import { Injectable } from '@angular/core';
import { CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';

// 定义组件需要实现的接口
export interface CanComponentDeactivate {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

@Injectable({ providedIn: 'root' })
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
  canDeactivate(
    component: CanComponentDeactivate,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState?: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    // 调用组件自身的canDeactivate方法来判断是否允许离开
    return component.canDeactivate ? component.canDeactivate() : true;
  }
}

2. 在组件中实现确认逻辑 #

修改你的组件，实现上面定义的接口，在canDeactivate方法里弹出自定义模态框，并根据用户选择返回结果：

import { Component } from '@angular/core';
import { ModalRef, ModalService } from 'your-modal-library-path'; // 替换成你的模态框库路径
import { DeleteConfirmModalComponent } from './delete-confirm-modal.component'; // 你的确认弹窗组件
import { Observable } from 'rxjs';
import { CanComponentDeactivate } from './can-deactivate.guard';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html'
})
export class MyComponent implements CanComponentDeactivate {
  constructor(private modalService: ModalService) {}

  canDeactivate(): Observable<boolean> {
    // 这里可以加额外判断，比如是否有未保存的修改，再决定是否弹窗
    return new Observable<boolean>(observer => {
      const config = {
        class: 'modal-lg modal-danger', // 注意把之前的逗号改成空格，避免样式错误
        keyboard: false,
        animated: true,
        ignoreBackdropClick: true,
        initialState: {
          title: 'Are you sure you want to leave',
          content: `Are you sure you want to leave the page?`
        }
      };

      const modalRef: ModalRef = this.modalService.show(DeleteConfirmModalComponent, config);
      modalRef.content.closeBtnName = 'Close';

      // 假设你的确认弹窗组件有confirm和cancel两个输出事件
      modalRef.content.confirm.subscribe(() => {
        observer.next(true); // 允许离开
        observer.complete();
        modalRef.close();
      });

      modalRef.content.cancel.subscribe(() => {
        observer.next(false); // 阻止离开
        observer.complete();
        modalRef.close();
      });
    });
  }
}

3. 在路由配置中添加守卫 #

最后在你的路由模块里，给目标路由配置这个守卫：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MyComponent } from './my-component.component';
import { CanDeactivateGuard } from './can-deactivate.guard';

const routes: Routes = [
  {
    path: 'my-component',
    component: MyComponent,
    canDeactivate: [CanDeactivateGuard] // 添加上守卫
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class MyRoutingModule { }

这样设置后，当用户点击其他路由链接时，会先弹出你的自定义确认模态框，只有用户确认离开后，路由才会跳转；如果用户取消，就会留在当前页面。

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