Cách quay lại trang cuối

Có cách nào thông minh để quay lại trang cuối trong Angular 2 không?

Cái gì đó như

this._router.navigate(LASTPAGE);

Ví dụ: trang C có một Go Backnút,

• Trang A -> Trang C, nhấp vào nó, quay lại trang A.

• Trang B -> Trang C, nhấp vào nó, quay lại trang B.

Liệu bộ định tuyến có thông tin lịch sử này?

Trên thực tế, bạn có thể tận dụng dịch vụ Vị trí tích hợp, sở hữu API "Quay lại".

Tại đây (trong 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();
  }
}

Chỉnh sửa : Như được đề cập bởi @ charith.arumapperuma Locationnên được nhập từ @angular/commonđó vì vậy import {Location} from '@angular/common';dòng này rất quan trọng.

Trong phiên bản cuối cùng của Angular 2.x / 4.x - đây là tài liệu 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>

Bạn có thể đặt điều này vào một lệnh, có thể được đính kèm với bất kỳ yếu tố có thể nhấp nào:

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

Sử dụng:

<button backButton>BACK</button>

Đã thử nghiệm với Angular 5.2.9

Nếu bạn sử dụng một neo thay vì một nút, bạn phải làm cho nó một liên kết thụ động với href="javascript:void(0)"để làm cho công việc Location góc.

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>

Bạn có thể thực hiện routerOnActivate()phương thức trên lớp tuyến đường của bạn, nó sẽ cung cấp thông tin về tuyến đường trước đó.

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

Sau đó, bạn có thể sử dụng router.navigateByUrl()và truyền dữ liệu được tạo từ ComponentInstruction. Ví dụ:

this._router.navigateByUrl(prevInstruction.urlPath);

Cũng làm việc cho tôi khi tôi cần di chuyển trở lại như trong hệ thống tập tin. PS @angular: "^ 5.0.0"

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

Tôi đã tạo một nút tôi có thể sử dụng lại bất cứ nơi nào trên ứng dụng của mình.

Tạo thành phần này

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

Sau đó thêm nó vào bất kỳ mẫu nào khi bạn cần một nút quay lại.

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

Lưu ý: Đây là sử dụng Tài liệu góc, nếu bạn không sử dụng thư viện đó thì hãy xóa mat-buttonvà color.

Sau tất cả những câu trả lời tuyệt vời này, tôi hy vọng câu trả lời của tôi tìm thấy ai đó và giúp đỡ họ. Tôi đã viết một dịch vụ nhỏ để theo dõi lịch sử tuyến đường. Nó đi từ đây.

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

Cách tôi đã làm trong khi điều hướng đến trang khác, thêm tham số truy vấn bằng cách chuyển vị trí hiện tại

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

Đọc thông số truy vấn này trong thành phần của bạn

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

Nếu returnUrl có mặt, bật nút quay lại và khi người dùng nhấp vào nút quay lại

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

Điều này sẽ có thể điều hướng đến trang trước. Thay vì sử dụng location.back Tôi cảm thấy phương pháp trên an toàn hơn, hãy xem xét trường hợp người dùng trực tiếp đến trang của bạn và nếu anh ta nhấn nút quay lại với location.back, nó sẽ chuyển hướng người dùng đến trang trước đó sẽ không phải là trang web của bạn.

Trong RC4:

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

Để quay lại mà không làm mới trang, Chúng tôi có thể làm bằng html như bên dưới javascript: history.back ()

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

Kể từ phiên bản beta 18:

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

trong góc 4 sử dụng preserveQueryParams, ví dụ:

url: /list?page=1

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

Khi nhấp vào liên kết, bạn được chuyển hướng edit/10?page=1, bảo toàn thông số

ref: https://angular.io/docs/ts/latest/guide/router.html#!#link-parameter-array

Giải pháp khác

window.history.back();