Angular8路由守卫原理和使用方法(3)

canDeactivate( component: ContactComponent, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot, nextState: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean { console.log('canDeactivate'); return component.pageLeave(); }

{ path: 'contact', canDeactivate: [AuthGuard], component: ContactComponent, data: { title: '联系我们' } }

pageLeave(): Observable<boolean> { return new Observable(ob => { if (!this.isSaven) { this.modal.warning({ nzTitle: '正在离开，是否需要保存改动的数据？', nzOnOk: () => { // 保存数据 ob.next(false); alert('is saving'); this.isSaven = true; }, nzCancelText: '取消', nzOnCancel: () => { ob.next(true); } }); } else { ob.next(true); } }); }

默认数据状态时未保存，可以选择不保存直接跳转也可以保存之后再跳转。

此场景多用于复杂表单页或者一些填写资料步骤的过程中，甚至浏览器后退和前进的操作也会触发这个守卫，唯一不足的地方时这个守卫绑定的是单一页面，无法统一对多个页面进行拦截。