CanDeactivateFn
The signature of a function used as a canDeactivate
guard on a Route
.
type CanDeactivateFn<T> = (component: T, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot, nextState: RouterStateSnapshot) => MaybeAsync<GuardResult>;
See also
Description
If all guards return true
, navigation continues. If any guard returns false
,
navigation is cancelled. If any guard returns a UrlTree
, the current navigation
is cancelled and a new navigation begins to the UrlTree
returned from the guard.
The following example implements and uses a CanDeactivateFn
that checks whether the
user component has unsaved changes before navigating away from the route.
@Component({template: ''})
export class UserComponent {
hasUnsavedChanges = true;
}
bootstrapApplication(App, {
providers: [
provideRouter([
{
path: 'user/:id',
component: UserComponent,
canDeactivate: [(component: UserComponent) => !component.hasUnsavedChanges],
},
]),
],
});