Início / user-10203327

Karthik Senniyappan's questions

Martin Hope
Karthik S
Asked: 2025-04-09 15:54:32 +0800 CST
  • 8

Problema

Estou usando um CanDeactivateprotetor no Angular para avisar o usuário antes de sair de um formulário com alterações não salvas. Funciona bem para alterações de rota normais (por exemplo, clicar em um link), mas trava quando o usuário pressiona o botão Voltar do navegador .

Cenário

Digamos que meu fluxo de roteamento seja:

/home → /usuário → /editar

  • O usuário está conectado /editcom alterações não salvas.
  • Pressiona o botão Voltar do navegador .
  • Uma caixa de diálogo de confirmação é exibida via CanDeactivate.
  • Se o usuário cancelar , a rota permanece a mesma (correta).
  • Mas quando eles pressionam novamente e confirmam , ele navega dois passos para trás /home, pulando/user .

O que eu tentei

Implementei uma CanDeactivateguarda como esta:

export class YourFormComponent implements CanComponentDeactivate, OnInit, AfterViewInit {
    hasUnsavedChanges = false;

    // Implement the canDeactivate method
    canDeactivate(): Observable<boolean> | boolean {
      if (!this.hasUnsavedChanges) {
        return true;
      }

      const confirmLeave = window.confirm('You have unsaved changes. Leave anyway?');
      return confirmLeave;
    }
}

rota.ts

import { Routes } from '@angular/router';
import { YourFormComponent } from './your-form.component';
import { ConfirmLeaveGuard } from './confirm-leave.guard';

const routes: Routes = [
  {
    path: 'form',
    component: YourFormComponent,
    canDeactivate: [ConfirmLeaveGuard]
  }
];

confrim-leave.guard.ts

import { inject } from '@angular/core';
import { CanDeactivateFn } from '@angular/router';
import { Observable } from 'rxjs';
import { Location } from '@angular/common';
export interface CanComponentDeactivate {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

export const ConfirmLeaveGuard: CanDeactivateFn<CanComponentDeactivate> = (component: any, currentRoute, currentState, nextState) => {
  const location = inject(Location);
  const result = component.canDeactivate();

  // If it's a boolean value
  if (typeof result === 'boolean') {
    if (!result) {
      location.replaceState(window.location.pathname); // Restore URL
    }
    return result;
  }

  // If it's an Observable or Promise
  if (result instanceof Observable || result instanceof Promise) {
    return new Promise(resolve => {
      Promise.resolve(result).then(confirmed => {
        if (!confirmed) {
          location.replaceState(window.location.pathname); // Restore URL
        }
        resolve(confirmed);
      });
    });
  }

  return true;
};

Também tentei usar Location.replaceState() ou Location.go() dentro do guarda para restaurar a pilha do histórico, mas ele ainda funciona mal ao usar o botão Voltar.

Pergunta Como posso manipular corretamente o botão Voltar do navegador com CanDeactivate para evitar navegação dupla ou rotas ignoradas?

Qualquer conselho ou exemplo será apreciado.

Exemplo de Stackblitz

Imagem de trabalho - https://s6.imgcdn.dev/YjXe3M.gif

javascript