J'ai créé un petit service où je peux stocker les changements d'itinéraire.
import { Injectable } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
@Injectable()
export class RouteState {
private previousUrl: string;
private currentUrl: string;
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;
}
}
Mais chaque fois que l'itinéraire change, les variables actuellesUrl et previousUrl ne sont pas définies. Est-ce que je fais quelque chose de mal?
Utilisez le service de localisation d'angular, il est intégré à angular et importez-le depuis '@ angular/common' comme ceci:
import { Component, OnInit, Input } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
import { Hero } from '../hero';
import { HeroService } from '../hero.service';
@Component({
selector: 'app-hero-detail',
templateUrl: './hero-detail.component.html',
styleUrls: [ './hero-detail.component.css' ]
})
export class HeroDetailComponent implements OnInit {
@Input() hero: Hero;
constructor(
private location: Location
) {}
goBack() {
this.location.back();
}
}
Et puis utilisez location.back () pour aller à la page précédente. Ceci est un exemple de travail:
Si vous voulez juste l'itinéraire précédent, vous pouvez créer un observable comme celui-ci
get previousRoute$(): Observable<string> {
return this.router.events.pipe(
filter(e => e instanceof RoutesRecognized),
pairwise(),
map((e: [RoutesRecognized, RoutesRecognized]) => e[0].url)
);
}
Vous pouvez maintenant vous abonner à cet observable et effectuer n'importe quelle action (assurez-vous de vous désabonner de cet observable sur l'événement OnDestroy.)
this.previousRoute$.subscribe(url => {
//perform your action
});
REMARQUE: cet observable commencera à émettre un événement lorsque l'utilisateur est en 2e navigation.
Depuis le routeur, vous pouvez obtenir la dernière navigation réussie avec la méthode
const lastSuccessfulNavigation = router.getLastSuccessfulNavigation();
Cet objet est de type Navigation
qui contient entre autres propriétés une propriété previousNavigation
qui à son tour est également du même type Navigation
.
const previousNavigation = lastSuccessfulNavigation.previousNavigation;
La navigation précédente est de type UrlTree
, qui peut être utilisée directement pour naviguer avec la méthode navigateByUrl
:
router.navigateByUrl(previousNavigation);
Si vous ne souhaitez pas utiliser le service de localisation fourni par Angular alors vous pouvez essayer le service suivant.
// service to get prev route
@Injectable()
export class RouteBackService {
public getPreviousUrl(routeArray): string {
let prevRoute = '';
for (let i = 0; i < routeArray.length - 1; i++) {
if (routeArray[i].url._value[0].length > 0) {
prevRoute += routeArray[i].url._value[0].path + '/';
}
}
return prevRoute.slice(0, -1);
}
}
// in the component from where you want to route back
export class YourComponent {
constructor (private _aRoute: ActivatedRoute,
private _routeBack: RouteBackService
private _router: Router) {}
goBack() {
const prevRoute=this._routeBack.getPreviousUrl(this._aRoute.pathFromRoot);
this._router.navigate([prevRoute]);
}
}