如何返回上一页

Question

是否有返回 Angular 2 中最后一页的巧妙方法？

类似

this._router.navigate(LASTPAGE);

例如，页面 C 有一个 返回 按钮，

A页->C页，点击返回A页
B页->C页，点击返回B页

路由器有这个历史信息吗？

Answer 1

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

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

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

this._router.navigateByUrl(prevInstruction.urlPath);

Answer 2

实际上您可以利用内置的位置服务，它拥有 "Back" 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();
  }
}

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

Answer 3

自测试版 18 以来：

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

Answer 4

在 RC4 中：

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

Answer 5

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

Answer 6

我在导航到不同页面时的做法是通过传递当前位置添加查询参数

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 按下后退按钮，它会将用户重定向到上一页，这不会你的网页。

Answer 7

在angular 4中使用preserveQueryParams，例如：

url: /list?page=1

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

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

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

Answer 8

当我需要像在文件系统中那样移回时，它也适用于我。 P.S。 @angular: "^5.0.0"

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

Answer 9

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

创建这个组件

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。

Answer 10

使用 Angular 5.2.9

测试

如果您使用锚点而不是按钮，则必须将其设为 被动 link 和 href="javascript:void(0)" 才能使 Angular 位置有效.

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>

Answer 11

另一个解决方案

window.history.back();

Answer 12

`<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>

Answer 13

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

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

Answer 14

To go back without refreshing the page, We can do in html like below javascript:history.back()

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

Answer 15

是的，你可以做到。在您的打字稿组件上编写此代码并享受！

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

Answer 16

也许您想检查之前的历史记录点是否在您的应用程序中。例如，如果您直接进入您的应用程序并执行 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 将是错误的，即使之前的位置实际上在我们的应用程序中但是页面已刷新。
用户可能希望通过单击浏览器的后退按钮“返回”到上一页（goBack() 出现的页面），但由于应用返回到历史记录而不是推送新位置，用户会回头看得更远，可能会感到困惑。

Answer 17

我是这样使用的：

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

@Component({
    selector: 'Back_page',
    template: `<button  (click)="onBack()">Back</button>`,
})
export class BackPageComponent {
  constructor(private location: Location) { }

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

Answer 18

如果历史记录为空，您还可以使用具有后备功能的此服务

url-back.service.ts

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

import { Router } from '@angular/router';

const EMPTY_HISTORY_LENGTH = 2;

/**
 * This service helps to Navigate back to the prev page, and if no prev page,
 * will redirect to the fallback url.
 */
@Injectable()
export class UrlBackService {
  constructor(private router: Router, private location: Location) {}

  /**
   * This method will back you to the previous page,
   * if no previous page exists, will redirect you to the fallback url.
   * @param href - url, if tryNativeFirst is provided, this is fallback url
   * @param tryNativeFirst - try to go back natively using browser history state.
   */
  back(href: string, tryNativeFirst: boolean = false) {
    if (tryNativeFirst) {
      if (history.length === EMPTY_HISTORY_LENGTH) {
        this.router.navigate(UrlBackService.urlToArray(href));
      } else {
        this.location.back();
      }
    } else {
      this.router.navigate(UrlBackService.urlToArray(href));
    }
  }

  /**
   * In case that router.navigate method tries to escape all '/' in the string,
   * was decided to split string to array, and if URL starts or ends with slash - remove them, eg:
   * /my/url will be split to ['', 'my', 'url'], so we need to remove empty spaces use filter function.
   * @param href
   * @private
   */
  private static urlToArray(href: string) {
    return href.split('/').filter((notEmpty) => notEmpty);
  }
}

url-back.service.spec.ts

import { TestBed } from '@angular/core/testing';

import { UrlBackService } from './url-back.service';
import { Router } from '@angular/router';
import { Location } from '@angular/common';
import { RouterTestingModule } from '@angular/router/testing';

describe('UrlBackService', () => {
  let service: UrlBackService;
  let router: Router;
  let location: Location;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [RouterTestingModule],
      providers: [UrlBackService],
    });
    service = TestBed.inject(UrlBackService);
    router = TestBed.inject(Router);
    location = TestBed.inject(Location);
  });

  it('should be created', () => {
    expect(service).toBeTruthy();
  });

  it('no meter what history state is, it should be redirected to the /my/url', () => {
    spyOn(router, 'navigate');
    service.back('/my/url');
    expect(router.navigate).toHaveBeenCalledWith(['my', 'url']);
  });

  it('in case history is empty push to /my/url', () => {
    spyOn(router, 'navigate');
    service.back('/my/url', true);
    expect(router.navigate).toHaveBeenCalledWith(['my', 'url']);
  });

  it('in case history is NOT empty push to url1', () => {
    spyOn(location, 'back');
    window.history.pushState(null, '', 'url1');

    service.back('/my/url', true);
    expect(location.back).toHaveBeenCalled();
  });
});

Answer 19

如果您使用最新的Angular/TypeScript

，请确保您明确导入

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

和

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

Answer 20

试试 routerLink="../child"

Answer 21

2022
利用您的应用程序路由 - 更多的是“angular 方法”，而不是访问浏览器的位置对象以获取导航历史记录。想想为什么你需要用户去 'back'，以及 'back' 在你的应用程序及其路由的更广泛的上下文中意味着什么。

例如，从子路由返回父路由

  this.router.navigate(['..'], {relativeTo: this.route});

您还可以阅读 previous navigation

previousNavigation : The previously successful Navigation object. Only one previous navigation is available, therefore this previous Navigation object has a null value for its own previousNavigation.

Answer 22

我想出来了，你也可以看看有没有上一页。确保在您的 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);
  }

}

如何返回上一页

How to go back last page

angular

angular2-routing

使用 Angular 5.2.9

`<button backButton>BACK</button>`