{ "id": "api/router/CanDeactivate", "title": "CanDeactivate", "contents": "\n\n
\n
\n
\n \n API > @angular/router\n
\n
\n mode_edit\n code\n
\n
\n \n
\n

CanDeactivatelink

\n \n \n \n \n \n
\n \n \n\n
\n \n
\n

Interface that a class can implement to be a guard deciding if a route can be deactivated.\nIf all guards return true, navigation continues. If any guard returns false,\nnavigation is cancelled. If any guard returns a UrlTree, current navigation\nis cancelled and a new navigation begins to the UrlTree returned from the guard.

\n\n

See more...

\n
\n \n \n
\n\ninterface CanDeactivate<T> {\n canDeactivate(component: T, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot, nextState?: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree\n}\n\n\n \n \n\n\n \n \n\n
\n\n \n\n \n \n
\n

Descriptionlink

\n

The following example implements a CanDeactivate function that checks whether the\ncurrent user has permission to deactivate the requested route.

\n\nclass UserToken {}\nclass Permissions {\n canDeactivate(user: UserToken, id: string): boolean {\n return true;\n }\n}\n\n

Here, the defined guard function is provided as part of the Route object\nin the router configuration:

\n\n@Injectable()\nclass CanDeactivateTeam implements CanDeactivate<TeamComponent> {\n constructor(private permissions: Permissions, private currentUser: UserToken) {}\n\n canDeactivate(\n component: TeamComponent,\n currentRoute: ActivatedRouteSnapshot,\n currentState: RouterStateSnapshot,\n nextState: RouterStateSnapshot\n ): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree {\n return this.permissions.canDeactivate(this.currentUser, route.params.id);\n }\n}\n\n@NgModule({\n imports: [\n RouterModule.forRoot([\n {\n path: 'team/:id',\n component: TeamComponent,\n canDeactivate: [CanDeactivateTeam]\n }\n ])\n ],\n providers: [CanDeactivateTeam, UserToken, Permissions]\n})\nclass AppModule {}\n\n

You can alternatively provide an in-line function with the canDeactivate signature:

\n\n@NgModule({\n imports: [\n RouterModule.forRoot([\n {\n path: 'team/:id',\n component: TeamComponent,\n canDeactivate: ['canDeactivateTeam']\n }\n ])\n ],\n providers: [\n {\n provide: 'canDeactivateTeam',\n useValue: (component: TeamComponent, currentRoute: ActivatedRouteSnapshot, currentState:\nRouterStateSnapshot, nextState: RouterStateSnapshot) => true\n }\n ]\n})\nclass AppModule {}\n\n\n \n
\n\n \n\n \n\n
\n

Methodslink

\n \n \n\n \n \n \n \n \n \n \n \n\n \n\n \n \n
\n
\n

\n canDeactivate()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n
\n \n\n canDeactivate(component: T, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot, nextState?: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n component\n T\n \n \n
\n \n currentRoute\n ActivatedRouteSnapshot\n \n \n
\n \n currentState\n RouterStateSnapshot\n \n \n
\n \n nextState\n RouterStateSnapshot\n

Optional. Default is undefined.

\n \n
\n\n \n
Returns
\n

Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree

\n\n \n\n\n \n\n \n
\n
\n\n \n
\n\n\n \n\n\n
\n
\n\n\n" }