Использование охранника CanDeactivate в маршрутизации Angular

Один из ключевых аспектов разработки приложений на Angular - управление навигацией и переходами между компонентами или маршрутами. В Angular имеется ряд "охранников" (Route Guards), которые помогают контролировать эти процессы, и один из них - это "CanDeactivate".

CanDeactivate используется для подтверждения навигации с текущего маршрута. С помощью этого охранника можно задать условия, при которых пользователь может или не может покинуть текущий маршрут. Это полезно, например, на формах с вводом данных — CanDeactivate позволит предотвратить случайную потерю введённых пользователем данных, показав диалоговое окно с подтверждением ухода с редактируемой страницы.

Пример использования CanDeactivate

Пример применения CanDeactivate может выглядеть следующим образом. Создаётся новый класс "CanDeactivateGuard", реализующий соответствующий интерфейс и его метод canDeactivate():

import { CanDeactivate } from '@angular/router';
import { Injectable } from '@angular/core';

interface CanComponentDeactivate {
 canDeactivate: () => boolean;
}

@Injectable()
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
 canDeactivate(component: CanComponentDeactivate): boolean {
   return component.canDeactivate ? component.canDeactivate() : true;
 }
}

Затем этот охранник применяется в определениях маршрутов:

const routes: Routes = [
  {
    path: 'edit/:id',
    component: EditComponent,
    canDeactivate: [CanDeactivateGuard]
  },
  // другие маршруты
];

В результате перед уходом с маршрута '/edit/:id' будет вызываться метод canDeactivate() охранника CanDeactivateGuard, и если он вернёт "true", то переход на другой маршрут будет разрешён.

Следует отметить, что CanDeactivate — это лишь одна из применяемых стратегий контроля навигации в Angular. В зависимости от задач приложения, могут быть использованы и другие охранники, такие как CanActivate, CanLoad и т.д.