Angular2: comment trouver l'url de la page précédente lorsque vous utilisez angular2 routing
je développe une application angular2 et j'utilise un routeur. Je suis dans une page /myapp/inscription. après l'inscription, je navigue vers /myapp / login. /myapp/connexion peut également être parcouru à partir de ma page d'accueil qui est /myapp. Donc maintenant, quand l'utilisateur utilise/myapp / login, je reviens en arrière. Cela peut être fait en utilisant l'emplacement.arrière.)( Mais je ne veux pas revenir en arrière quand l'utilisateur vient de /myapp/inscription. Je devrais donc vérifier si l'utilisateur vient de /myapp/signup et si c'est le cas, je veux le diriger vers un autre endroit. Comment puis-je savoir l'url précédente, de sorte que je diriger l'utilisateur vers un état spécifique basé sur qui ?
8 réponses
pairwise opérateur permet d'obtenir le courant avec la valeur précédente
mise à 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 d'itinéraire Angulaire?
origine (super vieux)
Injecter Router et vous abonner à des événements et de les conserver pour référence ultérieure
constructor(private _router: Router) {
this._router.subscribe(route => {
this.nextRoute ...
this.prevRoute ...
});
Oui, je voudrais faire 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'));
}
}
Vous pouvez le faire avec document.referrer
if(document.referrer !== '/myapp/signup'){
location.back()
}
vous pouvez peut-être tirer parti de la OnActivate phaserouterOnActivate méthode qui vous permet d'accéder à l'url précédente et l'actuelle.
routerOnActivate(next: ComponentInstruction, prev: ComponentInstruction) {
console.log(`Finished navigating from "${prev ? prev.urlPath : 'null'}" to "${next.urlPath}"`);
}
l'implémentation avec le pairwise ne fonctionnera pas si l'utilisateur ne déclenche pas l'événement de navigation au moins deux fois et peut causer un petit bug.
page 1 - > page 2 --- >événement de navigation déclenché, mais L'événement Observable n'a qu'une valeur et n'émet donc pas --- >L'utilisateur ne peut pas retourner à la page 1
page 2 - > page 3 -- >event Observable a maintenant 2 éléments et émet en paires
je me demande s'il y a une solution?
Vous pouvez définir l'url précédente en utilisant une guard auth et définir l'url précédente dans n'importe quel étaient de l'application.
canActivate(route: ActivatedRouteSnapshot, snapshot: RouterStateSnapshot) {
this.commonService.prevRouter = this.router.url;
}
Angular 6 Code mis à jour pour obtenir l'url précédente comme 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
});
}
import {Location} from '@angular/common';
private currentLocation;
constructor(private location: Location){
this.currentLocation = this.location.path();
}
ngAfterViewInit() {
let instance = this;
this.router.parent.subscribe(() => {
if (instance.currentLocation != instance.location.path()) {
console.log("previous -> "+instance.currentLocation+" != next -> "+instance.location.path());
}else{
console.log("previous -> "+instance.currentLocation+" == next -> "+instance.location.path());
}
});
}