Cara kembali ke halaman terakhir

Apakah ada cara cerdas untuk kembali ke halaman terakhir di Angular 2?

Sesuatu seperti

this._router.navigate(LASTPAGE);

Misalnya, halaman C memiliki Go Backtombol,

• Halaman A -> Halaman C, klik, kembali ke halaman A.

• Halaman B -> Halaman C, klik, kembali ke halaman B.

Apakah router memiliki informasi riwayat ini?

Sebenarnya Anda dapat memanfaatkan layanan Lokasi bawaan, yang memiliki API "Kembali".

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

Sunting : Seperti yang disebutkan oleh @ charith.arumapperuma Locationharus diimpor dari @angular/commonsehingga import {Location} from '@angular/common';garis ini penting.

Dalam versi final Angular 2.x / 4.x - inilah dokumen 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>

Anda dapat menempatkan ini ke arahan, yang dapat dilampirkan ke elemen yang dapat diklik:

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

Pemakaian:

<button backButton>BACK</button>

Diuji dengan Angular 5.2.9

Jika Anda menggunakan jangkar bukan tombol Anda harus membuat sebuah link yang pasif dengan href="javascript:void(0)"membuat sudut Lokasi bekerja.

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>

Anda dapat menerapkan routerOnActivate()metode pada kelas rute Anda, ini akan memberikan informasi tentang rute sebelumnya.

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

Kemudian Anda dapat menggunakan router.navigateByUrl()dan meneruskan data yang dihasilkan dari ComponentInstruction. Sebagai contoh:

this._router.navigateByUrl(prevInstruction.urlPath);

Juga berfungsi untuk saya ketika saya harus kembali seperti pada sistem file. PS @angular: "^ 5.0.0"

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

Saya membuat tombol yang bisa saya gunakan kembali di mana saja di aplikasi saya.

Buat komponen ini

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

Kemudian tambahkan ke template apa pun saat Anda membutuhkan tombol kembali.

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

Catatan: Ini menggunakan Bahan Sudut, jika Anda tidak menggunakan perpustakaan itu maka hapus mat-buttondan color.

Setelah semua jawaban yang luar biasa ini, saya harap jawaban saya menemukan seseorang dan membantu mereka. Saya menulis layanan kecil untuk melacak sejarah rute. Ini dia.

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

Cara saya melakukannya saat menavigasi ke halaman lain menambahkan param kueri dengan melewati lokasi saat ini

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

Baca param kueri ini di komponen Anda

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

Jika returnUrl hadir, aktifkan tombol kembali dan ketika pengguna mengklik tombol kembali

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

Ini harus dapat menavigasi ke halaman sebelumnya. Alih-alih menggunakan location.back saya merasa metode di atas lebih aman mempertimbangkan kasus di mana pengguna langsung mendarat ke halaman Anda dan jika ia menekan tombol kembali dengan location.back akan mengarahkan pengguna ke halaman sebelumnya yang tidak akan menjadi halaman web Anda.

Di RC4:

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

Untuk kembali tanpa menyegarkan halaman, Kita bisa melakukannya dalam html seperti di bawah ini javascript: history.back ()

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

Sejak beta 18:

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

dalam penggunaan sudut 4 preserveQueryParams, mis:

url: /list?page=1

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

Saat mengklik tautan, Anda dialihkan edit/10?page=1, melestarikan params

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

Solusi lain

window.history.back();