Comment déterminer l'URL de la page précédente en Angular ?

Question

Supposons que je me trouve actuellement sur la page dont l'URL est la suivante /user/:id . A partir de cette page, je passe à la page suivante. :id/posts .

Existe-t-il un moyen pour que je puisse vérifier l'URL précédente, c'est-à-dire /user/:id .

Voici mes itinéraires

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

Answer 1

Peut-être que toutes les autres réponses sont pour angular 2.X.

Maintenant, il ne fonctionne pas pour angular 5.X. Je travaille avec.

avec seulement NavigationEnd, vous ne pouvez pas obtenir l'url précédente.

car Router fonctionne de "NavigationStart", "RoutesRecognized",..., à "NavigationEnd".

Vous pouvez vérifier auprès de

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

Mais vous ne pouvez toujours pas obtenir l'url précédente même avec "NavigationStart".

Maintenant, vous devez utiliser la méthode par paire.

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

Avec pairwise, vous pouvez voir quelle url est de et vers.

"RoutesRecognized" est l'étape de changement de l'url d'origine à l'url cible.

alors filtrez-le et récupérez l'url précédente.

Le dernier mais non le moindre,

ce code met le composant parent ou supérieur (ex, app.component.ts)

parce que ce code se déclenche après la fin du routage.

Answer 2

Vous pouvez vous abonner aux changements d'itinéraire et stocker l'événement en cours afin de pouvoir l'utiliser lors du prochain événement.

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

Voir aussi Comment détecter un changement de route en Angular 2 ?

Answer 3

Créer un service injectable :

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

Ensuite, utilisez-le partout où vous en avez besoin. Pour stocker la variable courante le plus rapidement possible, il est nécessaire d'utiliser le service dans l'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);
  }

  //...

}

Answer 4

Angular 6 a mis à jour le code pour obtenir l'url précédente en tant que chaîne.

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

Answer 5

Cela a fonctionné pour moi dans angular 6 :

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