it-swarm.com.de

Wie kann ich die vorherige Seiten-URL in Angular ermitteln?

Angenommen, ich befinde mich derzeit auf der Seite mit der URL /user/:id. Nun gehe ich von dieser Seite zur nächsten Seite :id/posts.

Jetzt gibt es eine Möglichkeit, so dass ich die vorherige URL überprüfen kann, d. H. /user/:id.

Hier sind meine Routen

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

Sie können Routenänderungen abonnieren und das aktuelle Ereignis speichern, um es beim nächsten Ereignis verwenden zu können

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

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

35

Vielleicht sind alle anderen Antworten für Winkel 2.X.

Jetzt funktioniert es nicht für Winkel 5.X ... Ich arbeite damit.

mit nur NavigationEnd können Sie keine vorherige URL erhalten.

da der Router von "NavigationStart", "RoutesRecognized", ... bis "NavigationEnd" funktioniert.

Sie können mit überprüfen

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

Sie können jedoch auch mit "NavigationStart" keine vorherige URL erhalten.

Jetzt müssen Sie paarweise verwenden.

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

Mit pairwise können Sie sehen, was die URL von und bis ist.

"RoutesRecognized" ist der Änderungsschritt von Origin zu Ziel-URL.

so filtern Sie es und erhalten Sie die vorherige URL davon.

Zu guter Letzt,

dieser Code setzt eine übergeordnete Komponente oder höher (zB app.component.ts).

weil dieser Code nach dem Routing abbrennt.

38
BYUNGJU JIN

Erstellen Sie einen injizierbaren Dienst:

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

Dann verwenden Sie es überall dort, wo Sie es brauchen. Um die aktuelle Variable so schnell wie möglich zu speichern, muss der Dienst im AppModule verwendet werden.

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

  //...

}
15
Juliano

Angular 6 aktualisierter Code zum Abrufen der vorherigen URL als Zeichenfolge.

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

Das funktionierte für mich in Winkel 6: 

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

@ GünterZöchbauer auch du kannst es im localstorage speichern aber ich ziehe es nicht vor) Besser im service zu sparen und diesen wert von dort zu bekommen

 constructor(
        private router: Router
      ) {
        this.router.events
          .subscribe((event) => {
            if (event instanceof NavigationEnd) {
              localStorage.setItem('previousUrl', event.url);
            }
          });
      }
1
vladymy