CanDeactivateFn — Angular

Сигнатура функции, используемой в качестве guard canDeactivate для Route.

API

type CanDeactivateFn<T> = (
  component: T,
  currentRoute: ActivatedRouteSnapshot,
  currentState: RouterStateSnapshot,
  nextState: RouterStateSnapshot,
) => MaybeAsync<GuardResult>

Описание

Сигнатура функции, используемой в качестве guard canDeactivate для Route.

Если все guards возвращают true, навигация продолжается. Если хотя бы один guard возвращает false, навигация отменяется. Если хотя бы один guard возвращает UrlTree, текущая навигация отменяется и начинается новая навигация к UrlTree, возвращённому guard.

В следующем примере реализуется и используется CanDeactivateFn, который проверяет, есть ли у компонента пользователя несохранённые изменения, прежде чем перейти с этого маршрута.

@Component({
  template: '',
})
export class UserComponent {
  hasUnsavedChanges = true;
}

bootstrapApplication(App, {
  providers: [
    provideRouter([
      {
        path: 'user/:id',
        component: UserComponent,
        canDeactivate: [(component: UserComponent) => !component.hasUnsavedChanges],
      },
    ]),
  ],
});