web-dev-qa-db-fra.com

Comment revenir en arrière dernière page

Existe-t-il un moyen astucieux de revenir à la dernière page en Angular 2?

Quelque chose comme

this._router.navigate(LASTPAGE);

Par exemple, la page C a un Go Back bouton,

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

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

Le routeur a-t-il cette information d'historique?

angularangular2-routing
242
Hongbo Miao

En fait, vous pouvez tirer parti du service de localisation intégré, qui possède une API "Back".

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

Dans la version finale de 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
  }
}
71
Hinrich

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 que Angular Location fonctionne.

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>
15
JavierFuentes

Vous pouvez implémenter la méthode routerOnActivate() sur votre classe de route, elle fournira des informations sur la route précédente.

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);
15
Sasxa

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 Précédent.

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

Remarque: Ceci utilise un matériau angulaire. Si vous n'utilisez pas cette bibliothèque, supprimez les mat-button et color.

10
Todd Skelton

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

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

En RC4:

import {Location} from '@angular/common';
6
Tomasz Bielawa

La façon dont je l'ai fait en naviguant vers une page différente ajoute un paramètre de requête en transmettant l'emplacement actuel

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

Lire 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 Précédent et lorsque l'utilisateur clique sur le bouton Précédent

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

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

4
Puneeth Rai

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>
3
hansmaad

dans angular 4 use 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, en préservant les paramètres 

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

2
Carlos Alberto

Depuis la bêta 18:

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

1
Albert

Après toutes ces réponses géniales, j'espère que ma réponse trouvera quelqu'un et l'aidera. J'ai écrit un petit service pour garder l'historique de l'itinéraire. Ici ça va.

import { Injectable } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';

@Injectable()
export class RouteInterceptorService {
  private _previousUrl: string;
  private _currentUrl: string;
  private _routeHistory: string[];

  constructor(router: Router) {
    this._routeHistory = [];
    router.events.subscribe((event: any) => {
      this._setURLs(event);
    });
  }

  private _setURLs(event: any) {
    if (event instanceof NavigationEnd) {
      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;
  }
}
0
Anjil Dhamala