¿Cómo determinar la URL de la página anterior en Angular?
Supongamos que actualmente 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 poder verificar cuál es la URL anterior, es decir /user/:id?
A continuación están mis rutas.
export const routes: Routes = [
{
path: 'user/:id', component: UserProfileComponent
},
{
path: ':id/posts', component: UserPostsComponet
}
];
Quizás todas las demás respuestas sean para angular 2.X.
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 así no puedes obtener la URL anterior ni siquiera con "NavigationStart".
Ahora necesitas usar en 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 dónde.
"RoutesRecognized" es el paso de cambio de la URL de origen a la 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+
Se events.filterproduce un error porque el filtro no forma 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 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?
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 úselo donde lo 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);
}
//...
}
