在离开页面之前警告用户未保存的更改

在离开页面之前警告用户未保存的更改

本文介绍了在离开页面之前警告用户未保存的更改的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想在用户离开我的 angular 2 应用程序的特定页面之前警告他们未保存的更改.通常我会使用 window.onbeforeunload,但这不适用于单页应用程序.

我发现在 angular 1 中,您可以挂钩 $locationChangeStart 事件为用户抛出一个 confirm 框,但我没有看到任何显示如何使其适用于 angular 2 的内容,或者该事件是否仍然存在.我还看到了 ag1 的 pluginsonbeforeunload 提供功能,但同样,我没有没有看到任何将其用于 ag2 的方法.

我希望其他人已经找到了解决此问题的方法;任何一种方法都适合我的目的.

解决方案

路由器提供生命周期回调CanDeactivate

有关详细信息,请参阅警卫教程

class UserToken {}类权限{canActivate(user: UserToken, id: string): boolean {返回真;}}@Injectable()类 CanActivateTeam 实现 CanActivate {构造函数(私有权限:权限,私有当前用户:UserToken){}可以激活(路线:ActivatedRouteSnapshot,状态:RouterStateSnapshot): Observable|Promise|boolean {返回 this.permissions.canActivate(this.currentUser, route.params.id);}}@NgModule({进口:[RouterModule.forRoot([{路径:'团队/:id',组件:TeamCmp,canActivate: [CanActivateTeam]}])],提供者:[CanActivateTeam、UserToken、权限]})类 AppModule {}

原始(RC.x 路由器)

class CanActivateTeam 实现 CanActivate {构造函数(私有权限:权限,私有当前用户:UserToken){}canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):Observable{返回 this.permissions.canActivate(this.currentUser, this.route.params.id);}}引导程序(应用程序组件,[可以激活团队,提供路由器([{路径:'团队/:id',组成部分:团队,canActivate: [CanActivateTeam]}]));

I would like to warn users of unsaved changes before they leave a particular page of my angular 2 app. Normally I would use window.onbeforeunload, but that doesn't work for single page applications.

I've found that in angular 1, you can hook into the $locationChangeStart event to throw up a confirm box for the user, but I haven't seen anything that shows how to get this working for angular 2, or if that event is even still present. I've also seen plugins for ag1 that provide functionality for onbeforeunload, but again, I haven't seen any way to use it for ag2.

I'm hoping someone else has found a solution to this problem; either method will work fine for my purposes.

解决方案

The router provides a lifecycle callback CanDeactivate

for more details see the guards tutorial

original (RC.x router)

这篇关于在离开页面之前警告用户未保存的更改的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-29 23:31