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

Question

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

我发现在角1中，您可以连接到$locationChangeStart事件以为用户抛出确认框，但我还没有看到任何内容说明如何让它在角2中工作，或者该事件是否仍然存在。我还看到了为onbeforeunload提供功能的ag1插件，但同样，我还没有看到任何将其用于ag2的方法。

我希望其他人能找到解决这个问题的办法；这两种方法对我来说都很好。

Answer 1

stewDebaker中@Hostlistener的示例运行得非常好，但我对其进行了另一项更改，因为IE和Edge显示了MyComponent类上的canDeactive（）方法返回给最终用户的“false”。

组件：

import {ComponentCanDeactivate} from "./pending-changes.guard";
import { Observable } from 'rxjs'; // add this line

export class MyComponent implements ComponentCanDeactivate {

  canDeactivate(): Observable<boolean> | boolean {
    // insert logic to check if there are pending changes here;
    // returning true will navigate without confirmation
    // returning false will show a confirm alert before navigating away
  }

  // @HostListener allows us to also guard against browser refresh, close, etc.
  @HostListener('window:beforeunload', ['$event'])
  unloadNotification($event: any) {
    if (!this.canDeactivate()) {
        $event.returnValue = "This message is displayed to the user in IE and Edge when they navigate without using Angular routing (type another URL/close the browser/etc)";
    }
  }
}

Answer 2

路由器提供生命周期回调CanDe激活

有关更多详细信息，请参阅警卫教程

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 {}

原始（RC. x路由器）

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]
  }])
);

Answer 3

为了防止浏览器刷新、关闭窗口等（有关此问题的详细信息，请参阅@ChristopheVidal对Gunter答案的评论），我发现在类的canDeactivate实现中添加HostListener装饰器很有帮助，可以在卸载前监听窗口事件。正确配置后，这将同时防止应用程序内和外部导航。

例如：

组件：

import { ComponentCanDeactivate } from './pending-changes.guard';
import { HostListener } from '@angular/core';
import { Observable } from 'rxjs/Observable';

export class MyComponent implements ComponentCanDeactivate {
  // @HostListener allows us to also guard against browser refresh, close, etc.
  @HostListener('window:beforeunload')
  canDeactivate(): Observable<boolean> | boolean {
    // insert logic to check if there are pending changes here;
    // returning true will navigate without confirmation
    // returning false will show a confirm dialog before navigating away
  }
}

警卫：

import { CanDeactivate } from '@angular/router';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';

export interface ComponentCanDeactivate {
  canDeactivate: () => boolean | Observable<boolean>;
}

@Injectable()
export class PendingChangesGuard implements CanDeactivate<ComponentCanDeactivate> {
  canDeactivate(component: ComponentCanDeactivate): boolean | Observable<boolean> {
    // if there are no pending changes, just allow deactivation; else confirm first
    return component.canDeactivate() ?
      true :
      // NOTE: this warning message will only be shown when navigating elsewhere within your angular app;
      // when navigating away from your angular app, the browser will show a generic warning message
      // see http://stackoverflow.com/a/42207299/7307355
      confirm('WARNING: You have unsaved changes. Press Cancel to go back and save these changes, or OK to lose these changes.');
  }
}

路线：

import { PendingChangesGuard } from './pending-changes.guard';
import { MyComponent } from './my.component';
import { Routes } from '@angular/router';

export const MY_ROUTES: Routes = [
  { path: '', component: MyComponent, canDeactivate: [PendingChangesGuard] },
];

模块：

import { PendingChangesGuard } from './pending-changes.guard';
import { NgModule } from '@angular/core';

@NgModule({
  // ...
  providers: [PendingChangesGuard],
  // ...
})
export class AppModule {}

注：正如@JasperRisseeuw所指出的，IE和Edge处理预卸载前事件的方式与其他浏览器不同，并且当预卸载前事件激活时（例如浏览器刷新、关闭窗口等），IE和Edge会在确认对话框中包含单词“false”。在Angular应用程序中导航不受影响，并将正确显示您指定的确认警告消息。那些需要支持IE/Edge且不想在卸载前事件激活时在确认对话框中显示/想要更详细消息的人，可能还想查看@JasperRisseeuw的解决方法答案。