Angular路由守卫 canDeactivate
目的
离开页面时,做出逻辑判断
以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路由守卫 canDeactivate的更多相关文章
- Angular 路由守卫
1. 路由 Angular路由: 可以控制页面跳转:可以在多视图间切换: 2. 路由守卫 Angular路由守卫: 在进入或离开某路由时,用于判断是否可以离开.进入某路由::: return true ...
- Angular路由守卫 canActivate
作用 canActivate 控制是否允许进入路由. canActivateChild 等同 canActivate,只不过针对是所有子路由. 关键代码 创建路由守卫 import { Injecta ...
- angular路由守卫
路由守卫是指当用户满足了某些要求之后才可以离开或者进入某个页面或者场景的时候使用.比如说只有当用户填写了用户名和密码之后才可以进入首页,比如说用户离开某个页面时明月保存信息提示用户是否保存信息后再离 ...
- angular4.0 路由守卫详解
在企业应用中权限.复杂页多路由数据处理.进入与离开路由数据处理这些是非常常见的需求. 当希望用户离开一个正常编辑页时,要中断并提醒用户是否真的要离开时,如果在Angular中应该怎么做呢? 其实Ang ...
- angular路由详解六(路由守卫)
路由守卫 CanActivate: 处理导航到某个路由的情况. CanDeactivate:处理从当前路由离开的情况. Resole:在路由激活之前获取路由数据. 1.CanActivate: 处理导 ...
- Angular路由——路由守卫
一.路由守卫 当用户满足一定条件才被允许进入或者离开一个路由. 路由守卫场景: 只有当用户登录并拥有某些权限的时候才能进入某些路由. 一个由多个表单组成的向导,例如注册流程,用户只有在当前路由的组件中 ...
- Angular 从入坑到挖坑 - 路由守卫连连看
一.Overview Angular 入坑记录的笔记第六篇,介绍 Angular 路由模块中关于路由守卫的相关知识点,了解常用到的路由守卫接口,知道如何通过实现路由守卫接口来实现特定的功能需求,以及实 ...
- Angular入门到精通系列教程(13)- 路由守卫(Route Guards)
1. 摘要 2. 路由守卫(Route Guards) 2.1. 创建路由守卫 2.2. 控制路由是否可以激活 2.3. 控制路由是否退出(离开) 3. 总结 环境: Angular CLI: 11. ...
- Angular 4 路由守卫
路由守卫 只有当用户已经登录并拥有某些权限时才能进入某些路由 一个有多个表单组成的向导,如注册流程,用户只有在当前组件的组件中填写了满足要求的信息才可以导航到下一个路由 当用户未执行保存操作而试图离开 ...
随机推荐
- [ES7] Await multi promises sequentially or concurrently
Somtime 'async await' can have a bad effect on code proferemence. Let's take a look the below exampl ...
- NYOJ 364 田忌赛马
田忌赛马 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描写叙述 Here is a famous story in Chinese history. "That ...
- jquery或js 获取url参数
<script type="text/javascript"> function getUrlParam(name) { var reg = new RegExp(&q ...
- JAVA获取文件本身所在的磁盘位置
我们在做java开发(纯java程序,或者java web开发)时,经常会遇到需要读取配置文件的需求,如果我们将文件所在位置的信息直接写到程序中,例如:e:\workspace\javagui\bin ...
- [Compose] 13. Lift into a Pointed Functor with of
We examine the of function we've seen on a few types and discover it's the Pointed interface. Instea ...
- php中foreach源码分析(编译原理)
php中foreach源码分析(编译原理) 一.总结 编译原理(lex and yacc)的知识 二.php中foreach源码分析 foreach是PHP中很常用的一个用作数组循环的控制语句.因为它 ...
- [Jest] Snapshot
The problem we face daily when we do testing: The Data structure may changing, component outlook mig ...
- NSOperationQueue小结
将建立的线程增加队列之中.他们都是并发运行的 假设想有一个线程在另外一个线程之后再运行的话 有一个方法能够实现- (void)addDependency:(NSOperation *)op; 这一个 ...
- Expression Blend 的点滴(3)--Templating的妙用,制作自己的ScrollBar控件
原文:Expression Blend 的点滴(3)--Templating的妙用,制作自己的ScrollBar控件 在Blend中,有一个功能,Make into control---通过它可以方便 ...
- iOS 下载功能:断点下载(暂停和开始)(NSURLConnectionDataDelegate方法)
1,model文件代码 文件名称:HMFileDownloader.h #import <Foundation/Foundation.h> @interface HMFileDownloa ...