Retrieve the previous route in Angular 7

Question

Retrieve the previous route in Angular 7

I have developed a unique service that allows me to store route changes efficiently.

import { Injectable } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';

@Injectable()
export class RouteState {

  private previousRoute: string;
  private currentRoute: string;

  constructor(private router: Router) {
    this.currentRoute = this.router.url;    
    router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {        
        this.previousRoute = this.currentRoute;
        this.currentRoute = event.url;
      };
    });
  }

  public getPreviousRoute() {
    return this.previousRoute;
  }    
}

However, I am facing an issue where the currentRoute and previousRoute variables become undefined every time there is a route change. Can anyone suggest a solution?

angular typescript angular7

Answer 1

Answer №1

Utilize the built-in Location service from Angular by importing it from '@angular/common'. Here's how you can do it:

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

You can then use location.back() to navigate back to the previous page. Check out this working example:

https://stackblitz.com/angular/qvvrbgrmmda

Answer 2

Utilize the built-in Location service from Angular by importing it from '@angular/common'. Here's how you can do it:

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

You can then use location.back() to navigate back to the previous page. Check out this working example:

https://stackblitz.com/angular/qvvrbgrmmda

Answer 3

Answer №2

If you're looking to retrieve your previous route in an Angular application using @angular/router, here's a helpful method:

To learn more, check out the details on the original article

import { Injectable } from '@angular/core';
import { Router, RouterEvent, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

@Injectable({
    providedIn: "root"
})
export class PreviousRouteService {

    private previousUrl: string;
    private currentUrl: string;

    constructor(private router: Router) {

        this.currentUrl = this.router.url;
        this.previousUrl = null;

        this.router.events
                    .pipe(filter((event: RouterEvent) => event instanceof NavigationEnd))
                    .subscribe((event: NavigationEnd) => {
                        this.previousUrl = this.currentUrl;
                        this.currentUrl = event.urlAfterRedirects;
                        console.log("prev: ", this.previousUrl)
                        console.log("curr: ", this.currentUrl)
                    });

    }

    public getPreviousUrl() {
        return this.previousUrl;
    }

};

Answer 4

If you're looking to retrieve your previous route in an Angular application using @angular/router, here's a helpful method:

To learn more, check out the details on the original article

import { Injectable } from '@angular/core';
import { Router, RouterEvent, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

@Injectable({
    providedIn: "root"
})
export class PreviousRouteService {

    private previousUrl: string;
    private currentUrl: string;

    constructor(private router: Router) {

        this.currentUrl = this.router.url;
        this.previousUrl = null;

        this.router.events
                    .pipe(filter((event: RouterEvent) => event instanceof NavigationEnd))
                    .subscribe((event: NavigationEnd) => {
                        this.previousUrl = this.currentUrl;
                        this.currentUrl = event.urlAfterRedirects;
                        console.log("prev: ", this.previousUrl)
                        console.log("curr: ", this.currentUrl)
                    });

    }

    public getPreviousUrl() {
        return this.previousUrl;
    }

};

Answer 5

Answer №3

For obtaining the preceding route exclusively, you have the option of creating an observable in this manner:

 public previousRoute$: Observable<string> = this.router.events.pipe(
   filter((e) => e instanceof RoutesRecognized),
   pairwise(),
   map((e: [RoutesRecognized, RoutesRecognized]) => e[0].url)
 );

You can now subscribe to this observable and execute any code (Ensure to unsubscribe from this observable during the OnDestroy event.)

this.previousRoute$.subscribe(url => {
  //execute your functionality
});

REMARK: This observable will commence emitting events once the user navigates to the 2nd page.

Answer 6

For obtaining the preceding route exclusively, you have the option of creating an observable in this manner:

 public previousRoute$: Observable<string> = this.router.events.pipe(
   filter((e) => e instanceof RoutesRecognized),
   pairwise(),
   map((e: [RoutesRecognized, RoutesRecognized]) => e[0].url)
 );

You can now subscribe to this observable and execute any code (Ensure to unsubscribe from this observable during the OnDestroy event.)

this.previousRoute$.subscribe(url => {
  //execute your functionality
});

REMARK: This observable will commence emitting events once the user navigates to the 2nd page.

Answer 7

Answer №4

If you're not keen on utilizing Angular's Location Service, there is an alternative service you can explore.

// custom service for retrieving previous 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);
    }
}

// implementation in the component to navigate 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]);
    }
}

Answer 8

If you're not keen on utilizing Angular's Location Service, there is an alternative service you can explore.

// custom service for retrieving previous 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);
    }
}

// implementation in the component to navigate 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]);
    }
}

Retrieve the previous route in Angular 7

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

There is no index signature that accepts a parameter of type 'string' in the type '{ [key: string]: AbstractControl; }'

Guide to employing Axios types in project declaration files

Setting up the primary and thumbnail Swiper in Angular can be a bit tricky, especially when the initialization is set to false. This tutorial focuses on initializing Swiper 11.0

Utilizing Angular's Template-driven Forms for User Authentication and Registration

Leverage the Node Short ID library in conjunction with Angular 6 using TypeScript

Using leaflet-markercluster in Angular 2 with Leaflet

When working with Typescript, you can declare an interface and split its definition across multiple files

What is the best way to pass updates from input model class in a child component to its parent in Angular 13?

Properly passing props to child components in React with TypeScript. Resolve Error ts(2322)

What could be the reason for the absence of a TypeScript error in this situation?

evaluate a utility function that operates on children

Challenges arise when trying to access environment variables using react-native-dotenv in React

Using TypeScript and the `this` keyword in SharePoint Framework with Vue

Implement a class in Typescript that allows for the addition of properties at runtime

Suggestions for enhancing or troubleshooting Typescript ts-node compilation speed?

Secure your React TypeScript applications with GraphQL authentication

Exploring the Secrets of JSON Parsing in Angular

Is there a way for me to define the type of a prop based on the type of another prop?

How can I establish a connection to a Unix socket path using a connection string with Slonik?

Subscribing to events in Angular 2 after switching tabs and returning to the