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

我想在离开我的angular2应用程序的特定页面之前提醒未保存更改的用户。 通常我会使用window.onbeforeunload ,但这不适用于单页面应用程序。

我已经发现,在angular1,你可以钩入$locationChangeStart事件为用户抛出一个confirm框,但我还没有看到任何东西显示如何得到这个工作angular2,或者如果该事件是甚至还存在。 我还看到了针对onbeforeunload提供function的ag1 插件 ,但是我还没有看到用于ag2的任何方式。

我希望别人find了解决这个问题的办法。 任何方法都可以正常工作。

路由器提供了一个生命周期callback函数[CanDeactivate] https://angular.io/docs/ts/latest/api/router/index/CanDeactivate-interface.html ,您可以在其中阻止路由更改。

欲了解更多信息,请参阅守卫教程

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

还包括防止浏览器刷新,closures窗口等(见@ ChristopheVidal对Günter的回答关于这个问题的详细评论),我发现将@HostListener装饰器添加到你的类的canDeactivate实现中是非常有用的,以侦听beforeunload window事件。 如果configuration正确,这将同时防范应用内和外部导航。

例如:

零件:

 import {ComponentCanDeactivate} from './pending-changes.guard'; 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'; export interface ComponentCanDeactivate { canDeactivate: () => boolean | Observable<boolean>; } 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'; export const MY_ROUTES: Routes = [ { path: '', component: MyComponent, canDeactivate: [PendingChangesGuard] }, ]; 

模块:

 import {PendingChangesGuard} from './pending-changes.guard'; @NgModule({ // ... providers: [PendingChangesGuard], // ... }) export class AppModule {} 

注意 :正如@JasperRisseeuw指出的那样,IE和Edge处理beforeunload事件的方式与其他浏览器不同,在beforeunload事件激活时(例如,浏览器刷新,closures窗口等),将在确认对话框中包含单词false 。 在Angular应用程序内导航不受影响,并会正确显示您的指定确认警告消息。 那些需要支持IE / Edge并且不希望在beforeunload事件激活时在确认对话框中显示/想要更详细的消息的人可能还想看@ JasperRisseeuw的解决方法。

来自stewdebaker的@Hostlistener的例子工作得很好,但我做了一个更改,因为IE和Edge显示了MyComponent类的canDeactivate()方法返回的“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)"; } } }