wake-up-neo.net

Angular2: So ermitteln Sie die URL der vorherigen Seite, wenn Sie das angle2-Routing verwenden

Ich entwickle eine angle2-App und verwende den Router . Ich bin in einer Seite/myapp/signup. Nach der Anmeldung navigiere ich zur Verwendung von/myapp/login./myapp/login kann auch von meiner Startseite aus/myapp aufgerufen werden. Also jetzt, wenn der Benutzer user/myapp/login geht, gehe ich zurück. Dies kann mit location.back () erfolgen. Aber ich möchte nicht zurückgehen, wenn der Benutzer von/myapp/Anmelden kommt. Ich sollte also prüfen, ob der Benutzer von/myapp/signup kommt, und wenn ja, möchte ich es an einen anderen Ort verweisen. Wie kann ich die vorherige URL so kennen, dass ich den Benutzer auf einen bestimmten Zustand leiten kann ?

11
user3205675

Mit dem Operator pairwise kann der aktuelle Wert zusammen mit dem vorherigen Wert abgerufen werden

update

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

Siehe auch Wie erkennt man eine Routenänderung in Angular?

original (super alt) 

Fügen Sie Router ein, abonnieren Sie Ereignisse und speichern Sie sie für spätere Referenz

constructor(private _router: Router) {
  this._router.subscribe(route => {
    this.nextRoute ...
    this.prevRoute ...
  });
23

Ja, ich würde es so machen:

@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 aktualisierter Code zum Abrufen der vorherigen URL als Zeichenfolge.

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

Sie können die vorherige URL mit einem Authentifizierungsschutz festlegen und die vorherige URL in einem beliebigen Bereich der Anwendung festlegen.

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

Die Implementierung mit dem Pairwise funktioniert nicht, wenn der Benutzer mindestens zwei Mal ein Navigationsereignis auslöst, und kann einen kleinen Fehler verursachen.

seite 1 -> Seite 2 ---> Das Navigationsereignis wurde ausgelöst, aber das Observable-Ereignis hat nur einen Wert und daher wird paarweise kein Signal ausgegeben

seite 2 -> Seite 3 --> Ereignis Observable hat jetzt 2 Elemente und emittiert paarweise

Ich frage mich, ob es einen Workaround gibt?

0
Hou

Sie können dies mit document.referrer tun

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

Sie können die OnActivate -Phase mit der routerOnActivate-Methode nutzen, mit der Sie auf die vorherige und die aktuelle URL zugreifen können.

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