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

但是每次路由更改时，都未定义vars currentUrl和previousUrl。我在做错什么吗？

Answer 1

使用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

Answer 2

如果您只想要上一条路线，可以创建一个类似这样的可观察对象

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

现在您可以订阅此可观察对象并执行任何操作（确保在OnDestroy事件上取消订阅此可观察对象。）

this.previousRoute$.subscribe(url => {
  //perform your action
});

注意：当用户在第二次导航时，此可观察对象将开始发出事件。

Answer 3

这是一种使用 @angular/router

获取之前路线的方法

在the original post上查找更多

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

如果您不想使用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 5

这在Angular 8中对我有效：

通过路由器，您可以使用方法获得最后一次成功的导航

const lastSuccessfulNavigation = router.getLastSuccessfulNavigation();

该对象属于type Navigation，其中除其他属性外还包含previousNavigation类型的属性，而该属性又具有相同的Navigation类型。

const previousNavigation = lastSuccessfulNavigation.previousNavigation;

先前的导航是type UrlTree的导航，可以直接用于navigateByUrl方法的导航：

router.navigateByUrl(previousNavigation);

获取以前的路线Angular 7

5 个答案: