Angular路由守卫 canDeactivate （ng-zorro)

最新推荐文章于 2024-07-10 12:00:00 发布

转载最新推荐文章于 2024-07-10 12:00:00 发布 · 622 阅读

实用同时被 2 个专栏收录

738 篇文章

订阅专栏

Angular2

139 篇文章

订阅专栏

本文介绍如何在ng-alain框架中实现页面离开前的数据保存提示，通过自定义CanDeactivateGuardService来拦截页面导航，确保数据完整性和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文出处：http://www.cnblogs.com/Lulus/p/9497870.html

目的

离开页面时，做出逻辑判断
以ng-alain的项目为基础做演示
效果如图：
test3

关键代码

定义一个CanDeactivateGuardService

export class CanDeactivateGuardService implements CanDeactivate<CanDeactivateComponent> {

    canDeactivate(component: CanDeactivateComponent,
                  route: ActivatedRouteSnapshot,
                  state: RouterStateSnapshot): Observable<boolean> | boolean {
        return component.leaveTip();
    }
}

在component中完成leaveTip方法

leaveTip() {
  return Observable.create((observer) => {
    if(!this.isSave){
      this.modalService.confirm({
        nzTitle: '页面离开提示',
        nzContent: '数据尚未保存，是否离开该页面？',
        nzOnOk: async () => {
            observer.next(true);
        },
        nzOnCancel: () => {
            observer.next(false);
        }
      });
    }
    else{
      observer.next(true);
    }
  });
}

设置ng-alain的ReuseTabMatchMode，排除can-deactivate这个目标路由

this.reuseTabService.mode = ReuseTabMatchMode.URL;
const excludes = new Array<RegExp>();
excludes.push(new RegExp('/can-deactivate'));
this.reuseTabService.excludes = excludes;

示例代码

https://github.com/zLulus/NotePractice/tree/dev3/Website/DotNetCore/CoreNgAlain/src/app/routes/can-deactivate

参考资料

https://github.com/cipchk/ng-alain/issues/101