Come determinare l’URL della pagina precedente in Angolare?

Supponiamo che io sia attualmente sulla pagina che ha l’URL /user/:id . Ora da questa pagina vado alla pagina successiva :id/posts .

Ora c’è un modo, in modo che io possa controllare qual è l’URL precedente, cioè /user/:id .

Di seguito sono i miei percorsi

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

Puoi iscriverti alle modifiche del percorso e memorizzare l’evento corrente in modo da poterlo utilizzare quando succederà ancora

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

Vedi anche Come rilevare un cambio di rotta in Angular 2?

Forse tutte le altre risposte sono per 2.X angular.

Ora non funziona per 5.X angular. Sto lavorando con esso.

con solo NavigationEnd, non puoi ottenere l’url precedente.

perché il router funziona da “NavigationStart”, “RoutesRecognized”, …, a “NavigationEnd”.

Puoi controllare con

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

Ma ancora non puoi ottenere l’url precedente anche con “NavigationStart”.

Ora devi usare pairwise.

 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 pairwise, puoi vedere quale URL è da e verso.

“RoutesRecognized” è il passaggio di passaggio dall’origine all’URL di destinazione.

quindi filtralo e ottieni l’url precedente.

Ultimo, ma non per importanza,

questo codice inserisce il componente principale o superiore (es. app.component.ts)

perché questo codice si triggers dopo il completamento del routing.

Crea un servizio iniettabile:

 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; } } 

Quindi usalo ovunque ti serva. Per memorizzare la variabile corrente il prima ansible, è necessario utilizzare il servizio in 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); } //... } 

Angular 6 ha aggiornato il codice per ottenere l’url precedente come stringa.

 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 }); } 

@ GünterZöchbauer puoi anche salvarlo in localstorage ma non lo preferisco) meglio risparmiare in servizio e ottenere questo valore da lì

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

Ho avuto un problema simile quando volevo tornare alla pagina precedente. La soluzione era più facile di quanto immaginassi.

  

E ritorna all’URL del genitore. Spero che possa aiutare qualcuno;)