从beta 18开始:

import {Location} from 'angular /platform/common';

RC4:

import {Location} from '@angular/common';

<按钮返回按钮>返回</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>

这是我想出来的，你也可以查一下是否有上一页。 确保在你的appComponent中使用了这个服务。

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

interface HistoryData {
  previousPage: string | null,
  currentPage: string | null,
}

@Injectable({ providedIn: 'root' })
export class GoBackService {

  private historyData: HistoryData = { previousPage: null, currentPage: null };

  constructor(private router: Router, private location: Location) {
    this.router.events.subscribe((event) => {
      if (event instanceof NavigationEnd) {
        this.historyData.previousPage = this.historyData.currentPage;
        this.historyData.currentPage = event.urlAfterRedirects;
      }
    });
  }

  public goBack(): void {
    if (this.historyData.previousPage) this.location.back();
  }

  public canGoBack(): boolean {
    return Boolean(this.historyData.previousPage);
  }

}

从beta 18开始:

import {Location} from 'angular /platform/common';

也许你想检查之前的历史点是否在你的应用程序中。例如，如果你直接进入你的应用程序并执行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()发生的地方)，但由于应用程序返回历史而不是按一个新的位置，用户将会返回得更远，可能会感到困惑。