Wie gehe ich zurück zur letzten Seite?

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

Etwas wie

this._router.navigate(LASTPAGE);

Zum Beispiel hat Seite C eine Go BackSchaltfläche,

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

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

Hat der Router diese Verlaufsinformationen?

Tatsächlich können Sie den integrierten Standortdienst 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();
  }
}

Bearbeiten : Wie von @ charith.arumapperuma erwähnt, Locationsollte aus importiert werden, @angular/commondamit die import {Location} from '@angular/common';Zeile wichtig ist.

In der endgültigen Version von Angular 2.x / 4.x finden Sie 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
  }
}

<button backButton>BACK</button>

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>

Getestet mit Angular 5.2.9

Wenn Sie einen Anker anstelle einer Taste verwenden , müssen Sie es machen passive Verbindung mit href="javascript:void(0)"zu Angular Ort Arbeit zu machen.

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>

Sie können eine routerOnActivate()Methode für Ihre Routenklasse implementieren , die Informationen zur vorherigen Route enthält.

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

Dann können Sie router.navigateByUrl()die aus generierten Daten verwenden und weitergeben ComponentInstruction. Zum Beispiel:

this._router.navigateByUrl(prevInstruction.urlPath);

Arbeiten Sie auch für mich, wenn ich wie im Dateisystem zurückkehren muss. PS @angular: "^ 5.0.0"

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

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 einer beliebigen 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 das mat-buttonund color.

Nach all diesen tollen Antworten hoffe ich, dass meine Antwort jemanden findet und ihm hilft. Ich habe einen kleinen Dienst geschrieben, um den Verlauf der Route zu verfolgen. Hier kommt's.

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

So wie ich es beim Navigieren zu einer anderen Seite gemacht habe, fügen Sie einen Abfrageparameter hinzu, indem Sie den aktuellen Speicherort ü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, ist die oben beschriebene Methode meiner Meinung nach sicherer. Betrachten Sie den Fall, in dem der Benutzer direkt auf Ihrer Seite landet. Wenn er die Zurück-Taste mit location.back drückt, wird der Benutzer zur vorherigen Seite weitergeleitet, die nicht Ihre Webseite ist.

In RC4:

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

Um zurück zu gehen, ohne die Seite zu aktualisieren, können wir in HTML wie unten Javascript tun : history.back ()

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

Seit Beta 18:

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

im Winkel 4 verwenden preserveQueryParams, z.

url: /list?page=1

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

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

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

Eine andere Lösung

window.history.back();