Son sayfaya nasıl dönülür

Açısal 2'deki son sayfaya geri dönmenin akıllı bir yolu var mı?

Gibi bir şey

this._router.navigate(LASTPAGE);

Örneğin, C sayfasının bir Go Backdüğmesi vardır,

• A Sayfası -> C Sayfası, tıklayın, A sayfasına dönün.

• Sayfa B -> Sayfa C, tıklayın, sayfa B'ye dönün.

Yönlendirici bu geçmiş bilgisine sahip mi?

Aslında bir "Geri" API'sı olan yerleşik Konum hizmetinden yararlanabilirsiniz.

Burada (TypeScript'te):

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

Düzenleme : @ charith.arumapperuma tarafından belirtildiği gibi hat önemlidir böylece Locationithal edilmelidir .@angular/commonimport {Location} from '@angular/common';

Gelen son hali açısal 2.x / 4.x - burada belgeler var 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>

Bunu, tıklanabilir herhangi bir öğeye eklenebilecek bir yönerge içine koyabilirsiniz:

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

Kullanımı:

<button backButton>BACK</button>

Açısal 5.2.9 ile test edilmiştir

Eğer bir düğmesinin yerine bir çapa kullanırsanız bunu bir yapmalıdır pasif bağlantı ile href="javascript:void(0)"Açısal Yer çalışması için.

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>

routerOnActivate()Rota sınıfınıza yöntem uygulayabilirsiniz , önceki rota hakkında bilgi sağlayacaktır.

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

Ardından, router.navigateByUrl()oluşturulan verileri kullanabilir ve iletebilirsiniz ComponentInstruction. Örneğin:

this._router.navigateByUrl(prevInstruction.urlPath);

Dosya sisteminde olduğu gibi geri hareket etmem gerektiğinde de benim için çalış. PS @ açısal: "^ 5.0.0"

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

Uygulamamın herhangi bir yerinde tekrar kullanabileceğim bir düğme yaptım.

Bu bileşeni oluştur

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

Ardından geri düğmesine ihtiyacınız olduğunda şablonu herhangi bir şablona ekleyin.

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

Not: Bu, daha sonra kaldırmak o kütüphaneyi kullanmıyorsanız, Açısal Malzeme kullanıyor mat-buttonve color.

Tüm bu harika cevaplardan sonra, umarım cevabım birini bulur ve onlara yardım eder. Güzergah geçmişini takip etmek için küçük bir hizmet yazdım. İşte gidiyor.

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

Farklı bir sayfaya giderken yaptığım yol, geçerli konumu geçerek bir sorgu parametresi eklemek

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

Bileşeninizdeki bu sorgu parametresini okuyun

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

ReturnUrl varsa geri düğmesini etkinleştirin ve kullanıcı geri düğmesini tıkladığında

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

Bu, önceki sayfaya gidebilmelidir. Location.back kullanmak yerine, yukarıdaki yöntemin daha güvenli olduğunu hissediyorum, kullanıcının doğrudan sayfanıza geldiği durumu düşünün ve location.back ile geri düğmesine basarsa, kullanıcıyı web sayfanız olmayacak bir önceki sayfaya yönlendirir.

RC4'te:

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

Sayfayı yenilemeden geri dönmek için, javascript: history.back () gibi html ile yapabiliriz

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

Beta 18'den beri:

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

açısal 4 kullanımda preserveQueryParams, örneğin:

url: /list?page=1

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

Bağlantıyı tıkladığınızda, edit/10?page=1paramları koruyarak yönlendirilirsiniz

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

Başka bir çözüm

window.history.back();