38. Route Guards : CanDeactivate (Persistance de formulaire)

CanDeactivate empêche un utilisateur de quitter une route, généralement utilisé pour confirmer s'il souhaite abandonner des modifications non enregistrées dans un formulaire.

1. Définir l'interface de désactivation

Nous définissons une interface que les composants utilisant ce guard doivent implémenter.

typescript // can-deactivate.guard.ts import { Observable } from 'rxjs';

export interface CanComponentDeactivate { canDeactivate: () => Observable | Promise | boolean; }

// Le guard implémente CanDeactivate en utilisant le type de l'interface @Injectable({ providedIn: 'root' }) export class ChangesGuard implements CanDeactivate { canDeactivate(component: CanComponentDeactivate) { return component.canDeactivate ? component.canDeactivate() : true; } }

2. Implémenter l'interface dans le composant

Le composant doit fournir la méthode canDeactivate, qui contient la logique pour vérifier les changements non sauvegardés.

typescript // profile-editor.component.ts export class ProfileEditorComponent implements CanComponentDeactivate { hasUnsavedChanges: boolean = true;

canDeactivate(): boolean { if (this.hasUnsavedChanges) { return confirm('ATTENTION : vous avez des modifications non enregistrées. Quitter ?'); } return true; } }

3. Appliquer le Guard

typescript import { ChangesGuard } from './can-deactivate.guard';

const routes: Routes = [ { path: 'profile', component: ProfileEditorComponent, canDeactivate: [ChangesGuard] // Applique le guard lors d'une tentative de sortie } ];

Si le composant renvoie false, la navigation est interrompue et l'utilisateur reste sur la page actuelle.