Comment revenir à la dernière page

Existe-t-il un moyen intelligent de retourner à la dernière page d'Angular 2?

Quelque chose comme

this._router.navigate(LASTPAGE);

Par exemple, la page C a un Go Backbouton,

• Page A -> Page C, cliquez dessus, retour à la page A.

• Page B -> Page C, cliquez dessus, retour à la page B.

Le routeur possède-t-il ces informations d'historique?

En fait, vous pouvez profiter du service de localisation intégré, qui possède une API «Retour».

Ici (en 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 : Comme mentionné par @ charith.arumapperuma Locationdoit être importé de @angular/commonsorte que la import {Location} from '@angular/common';ligne est importante.

Dans la version finale d'Angular 2.x / 4.x - voici la documentation 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>

Vous pouvez mettre cela dans une directive, qui peut être attachée à n'importe quel élément cliquable:

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

Usage:

<button backButton>BACK</button>

Testé avec Angular 5.2.9

Si vous utilisez une ancre au lieu d'un bouton, vous devez en faire un lien passif avec href="javascript:void(0)"pour faire fonctionner Angular Location.

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>

Vous pouvez implémenter une routerOnActivate()méthode sur votre classe d'itinéraire, elle fournira des informations sur l'itinéraire précédent.

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

Ensuite, vous pouvez utiliser router.navigateByUrl() et transmettre les données générées à partir de ComponentInstruction. Par exemple:

this._router.navigateByUrl(prevInstruction.urlPath);

Fonctionne également pour moi lorsque je dois revenir en arrière comme dans le système de fichiers. PS @angular: "^ 5.0.0"

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

J'ai créé un bouton que je peux réutiliser n'importe où sur mon application.

Créer ce composant

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

Ajoutez-le ensuite à n'importe quel modèle lorsque vous avez besoin d'un bouton de retour.

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

Remarque: Il s'agit d'un matériau angulaire, si vous n'utilisez pas cette bibliothèque, supprimez le mat-buttonet color.

Après toutes ces réponses impressionnantes, j'espère que ma réponse trouvera quelqu'un et l'aidera. J'ai écrit un petit service pour garder une trace de l'historique des itinéraires. Ça y est.

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

La façon dont je l'ai fait lors de la navigation vers une page différente, ajoutez un paramètre de requête en passant l'emplacement actuel

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

Lisez ce paramètre de requête dans votre composant

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

Si returnUrl est présent, activez le bouton de retour et lorsque l'utilisateur clique sur le bouton de retour

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

Cela devrait pouvoir accéder à la page précédente. Au lieu d'utiliser location.back, je pense que la méthode ci-dessus est plus sûre, considérez le cas où l'utilisateur atterrit directement sur votre page et s'il appuie sur le bouton de retour avec location.back, il redirigera l'utilisateur vers la page précédente qui ne sera pas votre page Web.

Dans RC4:

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

Pour revenir en arrière sans rafraîchir la page, on peut faire en html comme ci-dessous javascript: history.back ()

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

Depuis la bêta 18:

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

en utilisation angulaire 4 preserveQueryParams, ex:

url: /list?page=1

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

Lorsque vous cliquez sur le lien, vous êtes redirigé edit/10?page=1, préservant les paramètres

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

Une autre solution

window.history.back();