在这些精彩的答案之后，我希望我的答案能找到一些人，并帮助他们。我编写了一个小服务来跟踪路线历史。开始了。

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

@Injectable()
export class RouteInterceptorService {
  private _previousUrl: string;
  private _currentUrl: string;
  private _routeHistory: string[];

  constructor(router: Router) {
    this._routeHistory = [];
    router.events
      .pipe(filter(event => event instanceof NavigationEnd))
      .subscribe((event: NavigationEnd) => {
        this._setURLs(event);
      });
  }

  private _setURLs(event: NavigationEnd): void {
    const tempUrl = this._currentUrl;
    this._previousUrl = tempUrl;
    this._currentUrl = event.urlAfterRedirects;
    this._routeHistory.push(event.urlAfterRedirects);
  }

  get previousUrl(): string {
    return this._previousUrl;
  }

  get currentUrl(): string {
    return this._currentUrl;
  }

  get routeHistory(): string[] {
    return this._routeHistory;
  }
}

<按钮返回按钮>返回</button>

你可以把它放到一个指令中，这个指令可以附加到任何可点击的元素上:

import { Directive, HostListener } from '@angular/core';
import { Location } from '@angular/common';

@Directive({
    selector: '[backButton]'
})
export class BackButtonDirective {
    constructor(private location: Location) { }

    @HostListener('click')
    onClick() {
        this.location.back();
    }
}

用法:

<button backButton>BACK</button>

是的，你能做到。在你的typescript组件上编写这段代码，然后享受吧!

import { Location } from '@angular/common'
import { Component, Input } from '@angular/core'

@Component({
    selector: 'return_page',
    template: `<button mat-button (click)="onReturn()">Back</button>`,
})
export class ReturnPageComponent {
  constructor(private location: Location) { }

  onReturn() {
    this.location.back();
  }
}

也许你想检查之前的历史点是否在你的应用程序中。例如，如果你直接进入你的应用程序并执行location.back()(例如，通过按下工具栏中的<- back按钮)，你会回到浏览器的主页面，而不是去应用程序中的其他地方。

这是我检查这个的方法:

import { Component } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Location } from '@angular/common';

@Component({
  selector: 'app-foo',
  template: ''
})
export class FooComponent {

  private readonly canGoBack: boolean;

  constructor(
    private readonly route: ActivatedRoute,
    private readonly router: Router,
    private readonly location: Location
  ) {
    // This is where the check is done. Make sure to do this
    // here in the constructor, otherwise `getCurrentNavigation()`
    // will return null. 
    this.canGoBack = !!(this.router.getCurrentNavigation()?.previousNavigation);
  }

  goBack(): void {
    if (this.canGoBack) {
      // We can safely go back to the previous location as
      // we know it's within our app.
      this.location.back();
    } else {
      // There's no previous navigation.
      // Here we decide where to go. For example, let's say the
      // upper level is the index page, so we go up one level.
      this.router.navigate(['..'], {relativeTo: this.route});
    }
  }

}

我们检查加载当前路由的导航是否有前一个兄弟。这必须在导航过程仍处于活动状态时在构造函数中完成。

但也有一些注意事项:

即使之前的位置实际上在我们的应用程序中，但页面被刷新，canGoBack也将为false。 用户可能想通过点击浏览器的返回按钮“返回”到上一页(goBack()发生的地方)，但由于应用程序返回历史而不是按一个新的位置，用户将会返回得更远，可能会感到困惑。

要返回而不刷新页面，我们可以像下面这样在html中做 javascript: history.back ()

<a class="btn btn-danger" href="javascript:history.back()">Go Back</a>

也为我工作时，我需要移动回文件系统。 P.S. @angular: "^5.0.0"

<button type="button" class="btn btn-primary" routerLink="../">Back</button>