Tengo una aplicación angular que usa la versión 9. Desde una de mis rutas (digamos, /search/details/id ), estoy redirigiendo a una URL externa usando el valor de URL que recibí de la respuesta API como

 window.location.href = "https://www.payment.com";

Ahora me redirigen a la página de pago externa donde puedo realizar el pago o cancelar la transacción.

Si hago clic en cancelar, se me redirige a la página anterior, que es mi aplicación angular con ruta /búsqueda/detalles/:id . Desde aquí, si hago clic en el botón Atrás del navegador, se me lleva a la página de pago en https://www.payment.com . Quiero que me naveguen a la aplicación angular /ruta de búsqueda en lugar de la cual navegué inicialmente a/buscar/detalles/id.

Traté de manejar el botón Atrás del navegador en el componente de las siguientes maneras,

 1. fromEvent(window, 'popstate') .subscribe((e) => { console.log(e, 'back button'); this.router.navigate( ['/search']); }); Added inside the constructor of the component corresponding to /search/details/:id 2. router.events.forEach((event) => { if(event instanceof NavigationStart) { if (event.navigationTrigger === 'popstate') { console.log(event, 'back button router'); } } }); Added inside constructor 3. @HostListener('window:popstate', ['$event']) onPopState(event) { this.router.navigate( ['search/']); } Inside the component

Ninguna de las devoluciones de llamada anteriores se activa cuando vuelvo desde la página externa y hago clic en el botón Atrás del navegador desde la página/buscar/detalles/:id. Sin embargo, cuando hago clic en el botón Atrás del navegador desde la página /buscar/detalles/id sin ir a la página externa, las devoluciones de llamada anteriores se activan y se llevan a la página /búsqueda.

Así que creo que volver a cargar la aplicación angular después de redirigir desde el exterior evita que se active el evento popstate.

Cualquier idea/solución es muy apreciada.

Gracias