So kehren Sie zur letzten Seite zurück

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

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>

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

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.

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>

In RC4:

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

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.

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>

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

Seit der Beta 18:

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

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

Eine andere Lösung

window.history.back();