Получить предыдущий маршрут Angular 7

Question

Я создал небольшой сервис, где я могу хранить изменения маршрута.

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

@Injectable()
export class RouteState {

  private previousUrl: string;
  private currentUrl: string;

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

Но каждый раз при изменении маршрута переменные currentUrl и previousUrl не определяются.Я что-то не так делаю?

Answer 1

Если вы не хотите использовать службу определения местоположения, предоставляемую Angular, вы можете попробовать следующую службу.

// service to get prev 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);
    }
    // in the component from where you want to route 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 2

Используйте службу определения местоположения angular, она встроена в angular и импортирует ее из '@ angular / common' следующим образом:

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

А затем используйте location.back () дляперейти на предыдущую страницуЭто рабочий пример:

https://stackblitz.com/angular/qvvrbgrmmda