CanDeactivate

Stable

Interface

What it does

Interface that a class can implement to be a guard deciding if a route can be deactivated.

How to use

  1. class UserToken {}
  2. class Permissions {
  3. canDeactivate(user: UserToken, id: string): boolean {
  4. return true;
  5. }
  6. }
  7. @Injectable()
  8. class CanDeactivateTeam implements CanDeactivate<TeamComponent> {
  9. constructor(private permissions: Permissions, private currentUser: UserToken) {}
  10. canDeactivate(
  11. component: TeamComponent,
  12. route: ActivatedRouteSnapshot,
  13. state: RouterStateSnapshot
  14. ): Observable<boolean>|Promise<boolean>|boolean {
  15. return this.permissions.canDeactivate(this.currentUser, route.params.id);
  16. }
  17. }
  18. @NgModule({
  19. imports: [
  20. RouterModule.forRoot([
  21. {
  22. path: 'team/:id',
  23. component: TeamCmp,
  24. canDeactivate: [CanDeactivateTeam]
  25. }
  26. ])
  27. ],
  28. providers: [CanDeactivateTeam, UserToken, Permissions]
  29. })
  30. class AppModule {}

You can alternatively provide a function with the canDeactivate signature:

  1. @NgModule({
  2. imports: [
  3. RouterModule.forRoot([
  4. {
  5. path: 'team/:id',
  6. component: TeamCmp,
  7. canDeactivate: ['canDeactivateTeam']
  8. }
  9. ])
  10. ],
  11. providers: [
  12. {
  13. provide: 'canDeactivateTeam',
  14. useValue: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => true
  15. }
  16. ]
  17. })
  18. class AppModule {}

Interface Overview

interface CanDeactivate {
canDeactivate(component: T, route: ActivatedRouteSnapshot, state: RouterStateSnapshot) : Observable<boolean>|Promise<boolean>|boolean

}

Interface Description

Interface Details

exported from @angular/router/index, defined in @angular/router/src/interfaces.ts