Come tornare all'ultima pagina

Esiste un modo intelligente per tornare all'ultima pagina in Angular 2?

Qualcosa di simile a

this._router.navigate(LASTPAGE);

Ad esempio, la pagina C ha un Go Backpulsante,

• Pagina A -> Pagina C, fare clic su di essa, tornare alla pagina A.

• Pagina B -> Pagina C, fare clic su di essa, tornare alla pagina B.

Il router ha queste informazioni sulla cronologia?

In realtà puoi usufruire del servizio di localizzazione integrato, che possiede un'API "Indietro".

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

Modifica : come menzionato da @ charith.arumapperuma Locationdovrebbe essere importato da @angular/commoncosì la import {Location} from '@angular/common';linea è importante.

Nella versione finale di Angular 2.x / 4.x: ecco i documenti 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>

Puoi inserirlo in una direttiva, che può essere collegata a qualsiasi elemento cliccabile:

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

Uso:

<button backButton>BACK</button>

Testato con Angolare 5.2.9

Se si utilizza un ancoraggio al posto di un pulsante è necessario effettuare un collegamento passivo con href="javascript:void(0)"per rendere il lavoro angolare Posizione.

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>

È possibile implementare il routerOnActivate()metodo sulla classe del percorso, fornirà informazioni sul percorso precedente.

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

Quindi è possibile utilizzare router.navigateByUrl()e trasmettere i dati generati da ComponentInstruction. Per esempio:

this._router.navigateByUrl(prevInstruction.urlPath);

Lavora anche per me quando devo tornare indietro come nel file system. PS @angular: "^ 5.0.0"

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

Ho creato un pulsante che posso riutilizzare ovunque sulla mia app.

Crea questo componente

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

Quindi aggiungilo a qualsiasi modello quando hai bisogno di un pulsante Indietro.

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

Nota: questo utilizza il materiale angolare, se non si utilizza quella libreria, rimuovere mat-buttone color.

Dopo tutte queste fantastiche risposte, spero che la mia risposta trovi qualcuno e li aiuti. Ho scritto un piccolo servizio per tenere traccia della cronologia dei percorsi. Eccolo.

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

Il modo in cui l'ho fatto mentre navigavo su una pagina diversa aggiunge un parametro di query passando la posizione corrente

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

Leggi questo parametro di query nel tuo componente

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

Se returnUrl è presente abilitare il pulsante Indietro e quando l'utente fa clic sul pulsante Indietro

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

Questo dovrebbe essere in grado di navigare alla pagina precedente. Invece di usare location.back ritengo che il metodo sopra sia più sicuro, considera il caso in cui l'utente atterra direttamente alla tua pagina e se preme il pulsante indietro con location.back reindirizzerà l'utente alla pagina precedente che non sarà la tua pagina web.

In RC4:

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

Per tornare indietro senza aggiornare la pagina, possiamo fare in html come sotto javascript: history.back ()

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

Dalla beta 18:

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

nell'uso angolare 4 preserveQueryParams, es:

url: /list?page=1

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

Quando si fa clic sul collegamento, si viene reindirizzati edit/10?page=1, preservando i parametri

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

Un'altra soluzione

window.history.back();