wake-up-neo.com

So kehren Sie zur letzten Seite zurück

Gibt es eine clevere Möglichkeit, die letzte Seite in Angular 2 zurückzugehen?

So etwas wie

this._router.navigate(LASTPAGE);

Zum Beispiel hat Seite C eine Go Back Taste,

  • Seite A -> Seite C, klicken Sie darauf, zurück zu Seite A.

  • Seite B -> Seite C, klicken Sie darauf, zurück zu Seite B.

Verfügt der Router über diese Verlaufsinformationen?

242
Hongbo Miao

Tatsächlich können Sie den integrierten Location-Service nutzen, der eine "Zurück" -API besitzt.

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

In der final-Version von Angular 2.x/4.x - hier die Dokumente 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

Getestet mit Angular 5.2.9

Wenn Sie einen Anker anstelle einer Schaltfläche verwenden, müssen Sie ihn als passive Verbindung mit href="javascript:void(0)" festlegen, damit Angular Location funktioniert.

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

Sie können die routerOnActivate()-Methode in Ihrer Routenklasse implementieren. Sie enthält Informationen zur vorherigen Route.

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

Dann können Sie router.navigateByUrl() verwenden und Daten übergeben, die von ComponentInstruction generiert wurden. Zum Beispiel:

this._router.navigateByUrl(prevInstruction.urlPath);
15
Sasxa

Ich habe eine Schaltfläche erstellt, die ich überall in meiner App wiederverwenden kann.

Erstellen Sie diese Komponente

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

Fügen Sie es dann zu jeder Vorlage hinzu, wenn Sie eine Zurück-Schaltfläche benötigen.

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

Hinweis: Hierbei wird Winkelmaterial verwendet. Wenn Sie diese Bibliothek nicht verwenden, entfernen Sie mat-button und color.

10
Todd Skelton

Arbeitet auch für mich, wenn ich mich wie im Dateisystem zurückbewegen muss . P.S. @angular: "^ 5.0.0"

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

In RC4:

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

So wie ich es gemacht habe, während Sie zu einer anderen Seite navigieren, fügen Sie einen Abfrageparameter hinzu, indem Sie den aktuellen Standort übergeben

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

Lesen Sie diesen Abfrageparameter in Ihrer Komponente

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

Wenn returnUrl vorhanden ist, aktivieren Sie die Zurück-Schaltfläche und wenn der Benutzer auf die Zurück-Schaltfläche klickt

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

Dies sollte in der Lage sein, zur vorherigen Seite zu navigieren. Anstatt location.back zu verwenden, denke ich, ist die obige Methode sicherer. Betrachten Sie den Fall, in dem der Benutzer direkt auf Ihre Seite gelangt, und wenn er den Zurück-Button mit location.back drückt, wird der Benutzer zur vorherigen Seite weitergeleitet, die nicht Ihre Webseite ist.

4
Puneeth Rai

Sie können dies in eine Direktive einfügen, die an jedes anklickbare Element angehängt werden kann:

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

Verwendungszweck:

<button backButton>BACK</button>
3
hansmaad

in Winkel 4 verwende preserveQueryParams, zB:

url: /list?page=1

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

Wenn Sie auf den Link klicken, werden Sie edit/10?page=1 umgeleitet, wobei die Parameter erhalten bleiben 

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

2
Carlos Alberto

Seit der Beta 18:

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

1
Albert

Nach all diesen großartigen Antworten hoffe ich, dass meine Antwort jemanden findet und ihnen hilft. Ich habe einen kleinen Service geschrieben, um den Verlauf der Route zu verfolgen. Hier kommt's.

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

Eine andere Lösung

window.history.back();

0
Džan Operta