Защита от потери данных при навигации

Функциональный гард CanDeactivateFn в Angular предотвращает уход с маршрута для защиты от потери несохраненных данных. Гард — это функция, которая получает экземпляр компонента для проверки его состояния и возвращает true или false, разрешая или блокируя навигацию.

import { CanDeactivateFn } from '@angular/router';

// Интерфейс, который должен реализовать компонент
export interface HasUnsavedChanges {
  hasUnsavedChanges(): boolean;
}

// Функциональный гард, который проверяет наличие
// несохраненных изменений в компоненте.
export const unsavedChangesGuard: CanDeactivateFn<HasUnsavedChanges> = (
  component
) => {
  // Если есть несохраненные изменения, запрашиваем подтверждение
  if (component.hasUnsavedChanges()) {
    return confirm(
      'У вас есть несохраненные изменения. Вы уверены, что хотите покинуть страницу?'
    );
  }
  // Если изменений нет, разрешаем навигацию
  return true;
};

👉 @sWebDev