Angular路由守卫 canDeactivate （ng-zorro)

梦里梦外; 2022-05-15 14:04 214阅读 0赞

原文出处：[http://www.cnblogs.com/Lulus/p/9497870.html][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_zLulus_NotePractice_tree_dev3_Website_DotNetCore_CoreNgAlain_src_app_routes_can-deactivate]

参考资料

[https://github.com/cipchk/ng-alain/issues/101][https_github.com_cipchk_ng-alain_issues_101]

[http_www.cnblogs.com_Lulus_p_9497870.html]: http://www.cnblogs.com/Lulus/p/9497870.html
[test3]: /images/20220503/89f032cfdd2542fe9d12213e4a37dfe8.png
[https_github.com_zLulus_NotePractice_tree_dev3_Website_DotNetCore_CoreNgAlain_src_app_routes_can-deactivate]: https://github.com/zLulus/NotePractice/tree/dev3/Website/DotNetCore/CoreNgAlain/src/app/routes/can-deactivate
[https_github.com_cipchk_ng-alain_issues_101]: https://github.com/cipchk/ng-alain/issues/101