意外未保存的数据？angular杀手锏CanDeactivate

1. 前言

实际工作中，你有没有填写表单的时候，错误地点击了某一个按钮，或者没有完成整个填写表单过程就退回去了，最后刚刚填写的一推信息全丢失了，重新进入一片空白，还得重新填！这简直不能忍受！

在angular中有没有办法可以解决以上问题呢？答案是肯定的。CanDeactivate路由拦截器，除非给定条件成立，否则Angular路由无法从当前页面路由到另一个页面。

2. 代码实现

首先创建路由拦截器

import { Injectable } from '@angular/core';
import { CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { UserComponent } from './user/user.component';

@Injectable()
export class UserGuard implements CanDeactivate<UserComponent> {
    canDeactivate(component: UserComponent, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot) {
        if (component.userForm.dirty) {
            return window.confirm('你有未保存的数据，是否要离开？');
        }
    }
}

1	import { Injectable } from '@angular/core';
2	import { CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
3	import { UserComponent } from './user/user.component';
4
5	@Injectable()
6	export class UserGuard implements CanDeactivate<UserComponent> {
7	canDeactivate(component: UserComponent, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot) {
8	if (component.userForm.dirty) {
9	return window.confirm('你有未保存的数据，是否要离开？');
10	}
11	}
12	}