如何返回上一页

有没有一种聪明的方法可以返回Angular 2的最后一页？

就像是

this._router.navigate(LASTPAGE);

例如，页面C有一个Go Back按钮，

• 页面A->页面C，单击它，回到页面A。

• 页面B->页面C，单击它，返回页面B。

路由器是否有此历史记录信息？

实际上，您可以利用内置的位置服务，该服务拥有“后退” API。

此处（在TypeScript中）：

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

@Component({
  // component's declarations here
})
class SomeComponent {

  constructor(private _location: Location) 
  {}

  backClicked() {
    this._location.back();
  }
}

编辑：如@ charith.arumapperuma所述，Location应从中导入，@angular/common因此该import {Location} from '@angular/common';行很重要。

在Angular 2.x / 4.x 的最终版本中-这是文档https://angular.io/api/common/Location

/* typescript */

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

@Component({
// declare component here
})
export class MyComponent {

  // inject location into component constructor
  constructor(private location: Location) { }

  cancel() {
    this.location.back(); // <-- go back to previous location on cancel
  }
}

<button backButton>BACK</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>

经过Angular 5.2.9测试

如果您使用的锚，而不是一个按钮，你必须更加被动的链接与href="javascript:void(0)"进行角向位置的工作。

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent {

  constructor( private location: Location ) { 
  }

  goBack() {
    // window.history.back();
    this.location.back();

    console.log( 'goBack()...' );
  }
}

app.component.html

<!-- anchor must be a passive link -->
<a href="javascript:void(0)" (click)="goBack()">
  <-Back
</a>

您可以routerOnActivate()在路由类上实现方法，它将提供有关先前路由的信息。

routerOnActivate(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction) : any

然后，您可以使用router.navigateByUrl()并传递从生成的数据ComponentInstruction。例如：

this._router.navigateByUrl(prevInstruction.urlPath);

当我需要移回文件系统中时，也可以为我工作。 PS @角度：“ ^ 5.0.0”

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

我做了一个按钮，可以在应用程序的任何地方重复使用。

创建此组件

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

@Component({
    selector: 'back-button',
    template: `<button mat-button (click)="goBack()" [color]="color">Back</button>`,
})
export class BackButtonComponent {
    @Input()color: string;

  constructor(private location: Location) { }

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

然后在需要后退按钮时将其添加到任何模板中。

<back-button color="primary"></back-button>

注意：这是使用Angular Material，如果您不使用该库，请删除mat-button和color。

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

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

我导航到其他页面时的方式是通过传递当前位置来添加查询参数

this.router.navigate(["user/edit"], { queryParams: { returnUrl: this.router.url }

阅读组件中的此查询参数

this.router.queryParams.subscribe((params) => {
    this.returnUrl = params.returnUrl;
});

如果存在returnUrl，则启用后退按钮，并且当用户单击后退按钮时

this.router.navigateByUrl(this.returnUrl); // Hint taken from Sasxa

这应该能够导航到上一页。与使用location.back相比，我认为上述方法更安全，考虑到用户直接登陆到您的页面的情况，并且如果他按下带有location.back的后退按钮，它将把用户重定向到上一个页面，该页面将不是您的网页。

在RC4中：

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

要返回而不刷新页面，我们可以在html中进行如下操作 ：javascript：history.back（）

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

自Beta 18开始：

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

在角度4使用中preserveQueryParams，例如：

url: /list?page=1

<a [routerLink]="['edit',id]" [preserveQueryParams]="true"></a>

单击链接时，您将被重定向edit/10?page=1，保留参数

参考：https : //angular.io/docs/ts/latest/guide/router.html#!# link-parameters- array

另一种解决方案

window.history.back();