Created
December 9, 2019 01:52
-
-
Save ZhenDeng/371afd19834704f43b79280bddfc1955 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
***Component: | |
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 | |
} | |
} | |
***Guard.ts | |
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.'); | |
} | |
} | |
***Route: | |
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] }, | |
]; | |
***Module: | |
import { PendingChangesGuard } from './pending-changes.guard'; | |
import { NgModule } from '@angular/core'; | |
@NgModule({ | |
// ... | |
providers: [PendingChangesGuard], | |
// ... | |
}) | |
export class AppModule {} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment