¿Cómo determinar la URL de la página anterior en Angular?

Posterior a observar en diferentes repositorios y foros al final encontramos la resolución que te compartimos pronto.

Solución:

Tal vez todas las demás respuestas sean para angular 2.X.

Ahora no funciona para angular 5.X. Estoy trabajando con eso.

con solo NavigationEnd, no puede obtener la URL anterior.

porque el enrutador funciona desde “NavigationStart”, “RoutesRecognized”,…, hasta “NavigationEnd”.

Puedes consultar con

    router.events.forEach((event) => 
  console.log(event);
);

Pero aún no puede obtener la URL anterior incluso con “NavigationStart”.

Ahora necesitas usar por parejas.

import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/pairwise';

constructor(private router: Router) 
  this.router.events
    .filter(e => e instanceof RoutesRecognized)
    .pairwise()
    .subscribe((event: any[]) => 
      console.log(event[0].urlAfterRedirects);
    );

    

Con pares, puede ver de qué URL es y de qué destino.

“RoutesRecognized” es el paso de cambio del origen a la URL de destino.

así que fíltrelo y obtenga la URL anterior.

Por último, pero no menos importante,

coloque este código en el componente principal o superior (por ejemplo, app.component.ts)

porque este código se activa después de finalizar el enrutamiento.

Actualizar angular 6+

Él events.filter da error porque el filtro no es parte de los eventos, así que cambie el código a

import  filter, pairwise  from 'rxjs/operators';

this.router.events
.pipe(filter((evt: any) => evt instanceof RoutesRecognized), pairwise())
.subscribe((events: RoutesRecognized[]) => 
  console.log('previous url', events[0].urlAfterRedirects);
  console.log('current url', events[1].urlAfterRedirects);
);

Puede suscribirse a los cambios de ruta y almacenar el evento actual para poder usarlo cuando suceda el próximo

previousUrl: string;
constructor(router: Router) 
  router.events
  .pipe(filter(event => event instanceof NavigationEnd))
  .subscribe((event: NavigationEnd) => 
    console.log('prev:', event.url);
    this.previousUrl = event.url;
  );

Consulte también ¿Cómo detectar un cambio de ruta en Angular?

Crear un servicio inyectable:

import  Injectable  from '@angular/core';
import  Router, RouterEvent, NavigationEnd  from '@angular/router';

 /** A router wrapper, adding extra functions. */
@Injectable()
export class RouterExtService 

  private previousUrl: string = undefined;
  private currentUrl: string = undefined;

  constructor(private router : Router) 
    this.currentUrl = this.router.url;
    router.events.subscribe(event => 
      if (event instanceof NavigationEnd)         
        this.previousUrl = this.currentUrl;
        this.currentUrl = event.url;
      ;
    );
  

  public getPreviousUrl()
    return this.previousUrl;
      

Luego úsalo donde lo necesites. Para almacenar la variable actual lo antes posible, es necesario utilizar el servicio en AppModule.

// AppModule
export class AppModule 
  constructor(private routerExtService: RouterExtService)

  //...



// Using in SomeComponent
export class SomeComponent implements OnInit 

  constructor(private routerExtService: RouterExtService, private location: Location)   

  public back(): void 
    this.location.back();
  

  //Strange name, but it makes sense. Behind the scenes, we are pushing to history the previous url
  public goToPrevious(): void 
    let previous = this.routerExtService.getPreviousUrl();

    if(previous)
      this.routerExtService.router.navigateByUrl(previous);
  

  //...

Si te sientes impulsado, eres capaz de dejar una crónica acerca de qué te ha impresionado de este tutorial.

---

---

Utiliza Nuestro Buscador