Cómo volver a la última página
¿Existe una forma inteligente de volver a la última página en Angular 2?
Algo como
this._router.navigate(LASTPAGE);
Por ejemplo, la página C tiene un Go Backbotón,
Página A -> Página C, haga clic en ella y regrese a la página A.
Página B -> Página C, haga clic en ella y regrese a la página B.
¿El enrutador tiene esta información histórica?
En realidad, puedes aprovechar el servicio de ubicación integrado, que posee una API "Atrás".
Aquí (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();
}
}
Editar : Como lo mencionó @charith.arumapperuma, Locationse debe importar desde @angular/common, por lo que la import {Location} from '@angular/common';línea es importante.
En la versión final de Angular 2.x/4.x: aquí están los documentos 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>
Puede poner esto en una directiva, que se puede adjuntar a cualquier elemento en el que se pueda hacer clic:
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();
}
}
Uso:
<button backButton>BACK</button>
Probado con Angular 5.2.9
Si usa un ancla en lugar de un botón, debe convertirlo en un enlace pasivohref="javascript:void(0)" para que Angular Location funcione.
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>
