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

Supongamos que estoy en la página que tiene la URL /user/:id. Ahora desde esta página navego a la página siguiente :id/posts.

Ahora, ¿hay alguna manera de que pueda verificar cuál es la URL anterior /user/:id?

Abajo están mis rutas

export const routes: Routes = [
  { 
    path: 'user/:id', component: UserProfileComponent
  },
  {  
    path: ':id/posts', component: UserPostsComponet 
  }
];

Puede suscribirse a los cambios de ruta y almacenar el evento actual para poder usarlo cuando ocurra 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?

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

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

solo con 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 pares.

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 hacia.

"RoutesRecognized" es el paso de cambio de la URL de origen a la de destino.

así que fíltralo y obtén la URL anterior.

Por último, si bien no menos importante,

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

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

Actualizar angular 6+

El events.filterda 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);
});

Crea 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 utilícelo en todos los lugares que necesite. 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);
  }

  //...

}

Código actualizado de Angular 6 para obtener la URL anterior como cadena.

import { Router, RoutesRecognized } from '@angular/router';
import { filter, pairwise } from 'rxjs/operators';


export class AppComponent implements OnInit {

    constructor (
        public router: Router
    ) {
    }

    ngOnInit() {
        this.router.events
            .pipe(filter((e: any) => e instanceof RoutesRecognized),
                pairwise()
            ).subscribe((e: any) => {
                console.log(e[0].urlAfterRedirects); // previous url
            });
    }

Esto funcionó para mí en versiones angulares> = 6.x:

this.router.events
            .subscribe((event) => {
              if (event instanceof NavigationStart) {
                window.localStorage.setItem('previousUrl', this.router.url);
              }
            });

Estoy usando Angular 8 y la respuesta de @ franklin-pious resuelve el problema. En mi caso, obtener la URL anterior dentro de una suscripción causa algunos efectos secundarios si se adjunta con algunos datos en la vista.

La solución alternativa que utilicé fue enviar la URL anterior como parámetro opcional en la navegación de la ruta.

this.router.navigate(['/my-previous-route', {previousUrl: 'my-current-route'}])

Y para obtener este valor en el componente:

this.route.snapshot.paramMap.get('previousUrl')

this.router y this.route se inyectan dentro del constructor de cada componente y se importan como miembros @ angular / enrutador.

import { Router, ActivatedRoute }   from '@angular/router';

Angular 8 y rxjs 6 en la versión 2019

Me gustaría compartir la solución basada en otras grandes soluciones.

Primero cree un servicio para escuchar los cambios de rutas y guarde la última ruta anterior en un Asunto de comportamiento, luego proporcione este servicio en el componente principal de la aplicación en el constructor y luego use este servicio para obtener la ruta anterior que desee cuando lo desee.

caso de uso: desea redirigir al usuario a una página de publicidad y luego redirigirlo automáticamente al lugar de donde vino, por lo que necesita la última ruta anterior para hacerlo.

// service : route-events.service.ts

import { Injectable } from '@angular/core';
import { Router, RoutesRecognized } from '@angular/router';
import { BehaviorSubject } from 'rxjs';
import { filter, pairwise } from 'rxjs/operators';
import { Location } from '@angular/common';

@Injectable()
export class RouteEventsService {

    // save the previous route
  public previousRoutePath = new BehaviorSubject<string>('');

  constructor(
    private router: Router,
    private location: Location
  ) {

    // ..initial prvious route will be the current path for now
    this.previousRoutePath.next(this.location.path());


    // on every route change take the two events of two routes changed(using pairwise)
    // and save the old one in a behavious subject to access it in another component
    // we can use if another component like intro-advertise need the previous route
    // because he need to redirect the user to where he did came from.
    this.router.events.pipe(
      filter(e => e instanceof RoutesRecognized),
      pairwise(),
        )
    .subscribe((event: any[]) => {
        this.previousRoutePath.next(event[0].urlAfterRedirects);
    });

  }
}

proporcionar el servicio en app.module

  providers: [
    ....
    RouteEventsService,
    ....
  ]

Inyectarlo en app.component

  constructor(
    private routeEventsService: RouteEventsService
  )

finalmente use la ruta anterior guardada en el componente que desee

  onSkipHandler(){
    // navigate the user to where he did came from
    this.router.navigate([this.routeEventsService.previousRoutePath.value]);
  }

PARA ANGULAR 7+

En realidad, desde Angular 7.2 no es necesario utilizar un servicio para guardar la URL anterior. Puede usar el objeto de estado para establecer la última URL antes de vincular a la página de inicio de sesión. A continuación, se muestra un ejemplo de un escenario de inicio de sesión.

@Component({ ... })
class SomePageComponent {
  constructor(private router: Router) {}

  checkLogin() {
    if (!this.auth.loggedIn()) {
      this.router.navigate(['login'], { state: { redirect: this.router.url } });
    }
  }
}

@Component({...})
class LoginComponent {
  constructor(private router: Router) {}

  backToPreviousPage() {
    const { redirect } = window.history.state;

    this.router.navigateByUrl(redirect || '/homepage');
  }
}

Además, también puede pasar los datos en la plantilla:

@Component({
  template: '<a routerLink="/some-route" [state]="{ redirect: router.url}">Go to some route</a>'
})
class SomePageComponent {
  constructor(public router: Router) {}
}

@ GünterZöchbauer también puedes guardarlo en localstorage pero yo no lo prefiero) mejor para ahorrar en servicio y obtener este valor de allí

 constructor(
        private router: Router
      ) {
        this.router.events
          .subscribe((event) => {
            if (event instanceof NavigationEnd) {
              localStorage.setItem('previousUrl', event.url);
            }
          });
      }

Puede utilizar la ubicación como se menciona aquí .

Aquí está mi código si el enlace se abrió en una nueva pestaña

navBack() {
    let cur_path = this.location.path();
    this.location.back();
    if (cur_path === this.location.path())
     this.router.navigate(['/default-route']);    
  }

Importaciones requeridas

import { Router } from '@angular/router';
import { Location } from '@angular/common';

Bastante simple usando previousNavigationobjeto:

this.router.events
  .pipe(
    filter(e => e instanceof NavigationEnd && this.router.getCurrentNavigation().previousNavigation),
    map(() => this.router.getCurrentNavigation().previousNavigation.finalUrl.toString()),
  )
  .subscribe(previousUrl => {}); 

Tuve algunos problemas para acceder a la URL anterior dentro de un guardia.
Sin implementar una solución personalizada, esta me está funcionando.

public constructor(private readonly router: Router) {
};

public ngOnInit() {
   this.router.getCurrentNavigation().previousNavigation.initialUrl.toString();
}

La URL inicial será la página de URL anterior.

Todas las RESPUESTAS anteriores se cargarán URL varias veces. Si el usuario también visitó cualquier otro componente, este código se cargará.

Así que es mejor usar el concepto de creación de servicios. https://community.wia.io/d/22-access-the-previous-route-in-your-angular-5-app

Esto funcionará bien en todas las versiones de Angular. (¡Asegúrese de agregarlo a la matriz de proveedores en su archivo app.module!)

Usando pares de rxjx puede lograr esto más fácilmente. importar {filtro, por pares} de 'rxjs / operadores';

previousUrl: string;
constructor(router: Router) {
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);
  this.previousUrl = events[0].urlAfterRedirects;
});

}

Tuve un problema similar cuando quise volver a la página anterior. La solución fue más fácil de lo que podía imaginar.

<button [routerLink]="['../']">
   Back
</button>

Y vuelve a la URL principal. Espero que ayude a alguien;)