在离开页面之前警告用户未保存的更改 [英] Warn user of unsaved changes before leaving page

问题描述

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

我发现在 angular 1 中，您可以挂钩 $locationChangeStart 事件为用户抛出一个 confirm 框，但我没有看到任何显示如何使其适用于 angular 2 的内容，或者该事件是否仍然存在.我还看到了 ag1 的 plugins 为 onbeforeunload 提供功能，但同样，我没有没有看到任何将其用于 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

class UserToken {}
class Permissions {
  canActivate(user: UserToken, id: string): boolean {
    return true;
  }
}
@Injectable()
class CanActivateTeam implements CanActivate {
  constructor(private permissions: Permissions, private currentUser: UserToken) {}
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean>|Promise<boolean>|boolean {
    return this.permissions.canActivate(this.currentUser, route.params.id);
  }
}
@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'team/:id',
        component: TeamCmp,
        canActivate: [CanActivateTeam]
      }
    ])
  ],
  providers: [CanActivateTeam, UserToken, Permissions]
})
class AppModule {}

original (RC.x router)

class CanActivateTeam implements CanActivate {
  constructor(private permissions: Permissions, private currentUser: UserToken) {}
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):Observable<boolean> {
    return this.permissions.canActivate(this.currentUser, this.route.params.id);
  }
}
bootstrap(AppComponent, [
  CanActivateTeam,
  provideRouter([{
    path: 'team/:id',
    component: Team,
    canActivate: [CanActivateTeam]
  }])
);

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