目的

离开页面时,做出逻辑判断

以ng-alain的项目为基础做演示

效果如图:

关键代码

定义一个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;

示例代码

示例代码

参考资料

feat(abc: reuse-tab): new reuse-tab component plans!

拓展阅读

Angular路由守卫

Angular路由守卫 canDeactivate的更多相关文章

  1. Angular 路由守卫

    1. 路由 Angular路由: 可以控制页面跳转:可以在多视图间切换: 2. 路由守卫 Angular路由守卫: 在进入或离开某路由时,用于判断是否可以离开.进入某路由::: return true ...

  2. Angular路由守卫 canActivate

    作用 canActivate 控制是否允许进入路由. canActivateChild 等同 canActivate,只不过针对是所有子路由. 关键代码 创建路由守卫 import { Injecta ...

  3. angular路由守卫

     路由守卫是指当用户满足了某些要求之后才可以离开或者进入某个页面或者场景的时候使用.比如说只有当用户填写了用户名和密码之后才可以进入首页,比如说用户离开某个页面时明月保存信息提示用户是否保存信息后再离 ...

  4. angular4.0 路由守卫详解

    在企业应用中权限.复杂页多路由数据处理.进入与离开路由数据处理这些是非常常见的需求. 当希望用户离开一个正常编辑页时,要中断并提醒用户是否真的要离开时,如果在Angular中应该怎么做呢? 其实Ang ...

  5. angular路由详解六(路由守卫)

    路由守卫 CanActivate: 处理导航到某个路由的情况. CanDeactivate:处理从当前路由离开的情况. Resole:在路由激活之前获取路由数据. 1.CanActivate: 处理导 ...

  6. Angular路由——路由守卫

    一.路由守卫 当用户满足一定条件才被允许进入或者离开一个路由. 路由守卫场景: 只有当用户登录并拥有某些权限的时候才能进入某些路由. 一个由多个表单组成的向导,例如注册流程,用户只有在当前路由的组件中 ...

  7. Angular 从入坑到挖坑 - 路由守卫连连看

    一.Overview Angular 入坑记录的笔记第六篇,介绍 Angular 路由模块中关于路由守卫的相关知识点,了解常用到的路由守卫接口,知道如何通过实现路由守卫接口来实现特定的功能需求,以及实 ...

  8. Angular入门到精通系列教程(13)- 路由守卫(Route Guards)

    1. 摘要 2. 路由守卫(Route Guards) 2.1. 创建路由守卫 2.2. 控制路由是否可以激活 2.3. 控制路由是否退出(离开) 3. 总结 环境: Angular CLI: 11. ...

  9. Angular 4 路由守卫

    路由守卫 只有当用户已经登录并拥有某些权限时才能进入某些路由 一个有多个表单组成的向导,如注册流程,用户只有在当前组件的组件中填写了满足要求的信息才可以导航到下一个路由 当用户未执行保存操作而试图离开 ...

随机推荐

  1. Synopsys工艺库札记

    Synopsys工艺库札记 库的基本信息 库类 库类语句指定库名. library ( smic13HT_ss ) { ... <lirary description> ... } /*e ...

  2. Opencv在视频中静态、动态方式绘制矩形框ROI

    Opencv视频处理中的目标跟踪经常用到要在视频上画一个矩形框ROI,标注出要跟踪的物体,这里介绍两种在视频中绘制矩形框的方法,一种是"静态的",一种是"动态的" ...

  3. HTML5 canvas 指针时钟

    <!doctype html> <html> <head></head> <body> <canvas id="> 您 ...

  4. python property属性

    能够检查參数,一直没注意这个语言特性,忽略了非常多细节,感谢 vitrox class Person( object ): def __init__( self, name ): if not isi ...

  5. NSOperationQueue小结

    将建立的线程增加队列之中.他们都是并发运行的  假设想有一个线程在另外一个线程之后再运行的话 有一个方法能够实现- (void)addDependency:(NSOperation *)op; 这一个 ...

  6. linux mysql 卸载,安装,測试全过程

    Mysql卸载 yum remove mysql mysql-server mysql-libs compat-mysql51 rm -rf /var/lib/mysql rm /etc/my.cnf ...

  7. js如何遍历表单所有控件

    js如何遍历表单所有控件 一.总结 一句话总结: 1.获取form表单里面的的所有元素:通过formelement.elements,这里form元素通过name属性直接定位 var fele=for ...

  8. BZOJ 3932 - 主席树

    传送门 题目分析 在只打会主席树模板的情况下做了这道题,也算是深有体会. 首先任务可以差分:一个任务是(s, e, p), 则在s处+1, 在e+1处-1,符合前缀.但是我们要查询指定时间的前k任务之 ...

  9. Max-Min Fairness带宽分配算法

    近期再写一个网络仿真器,里面參考了Max-MinFairness算法,这是一种比較理想.公平的带宽分配算法.其思路主要例如以下:首先是算法的准备,考察某一时刻的网络中全部的flow,因为每条flow都 ...

  10. spring boot jar 部署linux服务器

    用命令启动spring boot 项目,一旦终端命令窗口关闭,项目也就关闭了,所以我们采用脚本的方式来运行jar 正常命令 java -jar xxx.jar 脚本启动,vim 创建 start.sh ...