web-dev-qa-db-fra.com

Angular2: Comment savoir quelle était l'URL de la page précédente avec le routage angular2

Je développe une application angular2 et j'utilise un routeur . Je suis dans une page/myapp/inscription. après inscription, je navigue dans/myapp/login./myapp/login peut également être parcouru à partir de ma page d'accueil qui est/myapp. Alors maintenant, quand les utilisateurs/myapp/login, je reviens en arrière. Cela peut être fait en utilisant location.back (). Mais je ne veux pas revenir en arrière lorsque l'utilisateur vient de/myapp/signup. Donc, je devrais vérifier si l'utilisateur vient de/myapp/signup et si oui, je veux le diriger vers un autre endroit .. Comment puis-je connaître l'URL précédente afin que je dirige l'utilisateur vers un état spécifique ?

angularangular2-routing
11
user3205675

L'opérateur pairwise permet d'obtenir le courant avec la valeur précédente

mettre à jour

import 'rxjs/add/operator/pairwise';
import 'rxjs/add/operator/filter';
import { Router, NavigationEnd } from '@angular/router';

export class AppComponent {
    constructor(private router: Router) {
        this.router.events
        .filter(e => e instanceof NavigationEnd)
        .pairwise().subscribe((e) => {
            console.log(e);
        });
    }
}

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

original (super vieux) 

Injectez Router et souscrivez à des événements et stockez-les pour référence ultérieure

constructor(private _router: Router) {
  this._router.subscribe(route => {
    this.nextRoute ...
    this.prevRoute ...
  });
23
Günter Zöchbauer

Oui, je le ferais de cette façon:

@Injectable() // do not forget to register this class as a provider
export class PreviousRouteRecorder implements CanDeactivate<any> {
  constructor(private router: Router) {
  }
  canDeactivate(component: any): Observable<boolean> | boolean {
    localStorage.setItem('previousRoute', this.router.url);
    return true;
  }
}

export const ROUTES: Routes = [
  {
    path: 'first',
    component: FirstComponent,
    canDeactivate: [PreviousRouteRecorder]},
  {
    path: 'second',
    component: SecondComponent
  }
];

export class SecondComponent implements OnInit {
  ngOnInit(){
    console.log(localStorage.getItem('previousRoute'));
  }
}
1
Stephen Paul

Angular 6 code mis à jour pour obtenir l'URL précédente sous forme de chaîne.

import { Component, OnInit } from '@angular/core';
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
            });
    }
1
Franklin Pious

Vous pouvez définir l'URL précédente à l'aide d'un garde d'authentification et définir l'URL précédente dans tous les cas de l'application.

canActivate(route: ActivatedRouteSnapshot, snapshot: RouterStateSnapshot) {
                this.commonService.prevRouter = this.router.url;
}
0
Soumya K

L'implémentation avec la paire ne fonctionnera pas si l'utilisateur ne déclenche pas l'événement de navigation au moins deux fois et risque de causer un petit bogue.

page 1 -> page 2 ---> événement de navigation déclenché, mais l'événement Observable n'a qu'une valeur et donc, par paire, il n'est pas émis ---> L'utilisateur ne peut pas revenir à la page 1

page 2 -> page 3 --> événement Observable a maintenant 2 éléments et émet par paires

Je me demande s'il y a une solution de contournement?

0
Hou

Vous pouvez le faire avec document.referrer

if(document.referrer !== '/myapp/signup'){
    location.back()
}
0
Bob van Luijt

Vous pouvez peut-être utiliser la phase OnActivate avec la méthode routerOnActivate qui vous donne accès à l’URL précédente et à l’URL actuelle.

routerOnActivate(next: ComponentInstruction, prev: ComponentInstruction) {
  console.log(`Finished navigating from "${prev ? prev.urlPath : 'null'}" to "${next.urlPath}"`);
}
0
cexbrayat