Как вернуться на последнюю страницу

Question

Есть ли умный способ вернуться на последнюю страницу в Angular 2?

Что-то вроде

this._router.navigate(LASTPAGE); 

Например, страница C имеет кнопку Вернуться,

• Страница А -> страница C, нажмите на него, обратно на страницу A.

• Страница B -> Страница C, щелкните по нему, назад к странице B.

Есть ли у маршрутизатора эта информация об истории?

Answer 1

На самом деле вы можете воспользоваться встроенным сервисом определения местоположения, которому принадлежит «Назад» api.

Здесь (машинопись):

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

Answer 2

Вы можете применить метод routerOnActivate() в своем классе маршрута, он предоставит информацию о предыдущем маршруте.

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

Затем вы можете использовать router.navigateByUrl() и передавать данные, полученные от ComponentInstruction. Например:

this._router.navigateByUrl(prevInstruction.urlPath); 

Answer 3

Так как бета-18:

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

Answer 4

В RC4:

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

Answer 5

В окончательной версии угловых 2.х/4.x - вот документы https://angular.io/docs/ts/latest/api/common/index/Location-class.html

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

Answer 6

Как я это сделал во время навигации к другой странице добавления параметров запроса, передавая текущее местоположение

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

Прочитайте эти параметры запроса в компоненте

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

Если ReturnUrl является присутствуют кнопки возврата и когда пользователь нажимает кнопку возврата

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

Это может привести к переходу на предыдущую страницу. Вместо использования location.back я считаю, что вышеописанный метод более безопасен, рассмотрим случай, когда пользователь непосредственно приземляется на вашу страницу, и если он нажмет кнопку «Назад» с помощью location.back, он перенаправит пользователя на предыдущую страницу, которая не будет вашей веб-страницей.

Answer 7

в угловом 4 используют preserveQueryParams, например:

url: /list?page=1 

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

При нажатии на ссылку, вы будете перенаправлены edit/10?page=1, сохраняя PARAMS

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

Answer 8

также работать для меня, когда мне нужно как в файловой системе. P.S. @angular: "^ 5.0.0"

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

Answer 9

Я сделал кнопку, я могу повторно использовать в любом месте на мое приложение.

Создать этот компонент

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

Затем добавить его в любой шаблон, когда вам нужна кнопка назад.

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

Примечание: Это используется Угловое материал, если вы не используете эту библиотеку затем удалите mat-button и color.