用户离开页面，打开应用里的其它页面的时候，可能因为某些原因暂时不想让用户离开当前页面，比如可能正在编辑的内容还没有保存，用户如果离开这个页面，没保存的数据就会丢失。

在路由上使用 canDeactivate 类型的守卫，在用户离开当前路由打开应用里的其它路由的时候，可以检查一些条件，然后决定是否让用户离开。

canDeactivate

先去生成一个守卫，在终端项目的下面，用 ng 命令 generate 一个 guard，放在 modules，demo，admin 的下面，守卫的名字叫 can-deactivate。执行一下，提示选择要实施的接口，可以暂时不选择，直接回车。

回到项目，打开刚才生成的这个守卫，这个守卫的 implements 后面还没有设置要实施的东西，这个守卫要实施的是 CanDeactivate 接口，类型暂时先设置成 any，这个类型应该是组件的类型。

编辑器会在文件顶部自动导入 CanDeactivate。

实施这个接口，要在类里面添加一个特定的方法，可以选中这个类的名字，按一下 command + . 选择实施 CanDeactivate 接口，这样会在类里面添加一个 canDeactivate 方法。

方法接收一些参数。 冒号右边这些东西是这个方法可能会返回的值的类型。

这个守卫的 canDeactivate 方法如果最终 return 的值是 true，使用了这个守卫的路由就允许用户离开，去访问其它的地方，如果方法执行之后，最终 return 的是 false，就不允许用户离开当前路由。

在方法里，先在控制台上输出点文字，用一个 console.log，输出 Can deactivate guard. 然后让方法暂时先 return false 。

使用

下面找个地方用一下这个守卫，打开 Demo 模块的路由模块，在这个 admin 路由的上面，添加一个 canDeactivate 属性，它的值是个数组，里面可以添加要用在这条路由上的 canDeactivate 类型的守卫。也就是实施了 CanDeactivate 接口的守卫。

添加一个 CanDeactivateGuard，这个就是刚才我们创建的守卫。

预览

回到浏览器预览一下，登录一下，回到 Admin，然后试着离开这个页面，访问应用里的其它的地方。你会发现导航不管用了。

控制台上输出了一个 Can deactivate guard，因为在 Admin 这个路由上，用了一个 canDeactivate 类型的守卫，现在这个守卫里一直会 return false，所以不让用户离开当前这条路由。

按一下浏览器上的后退按钮，控制台上也会输出 Can deactivate guard 。 回到项目，打开 CanDeactivateGuard，这回让这个方法 return true 。

再回到浏览器试一下，按一下 Login，打开 Admin ，再试着访问一下其它的地方，这次就可以正常打开其它的地方了，因为用在 Admin 路由上的 CanDeactivateGuard 守卫的 canDeactivate 方法会一直返回 true。