마지막 페이지로 돌아가는 방법

Angular 2의 마지막 페이지로 돌아가는 현명한 방법이 있습니까?

같은 것

this._router.navigate(LASTPAGE);

예를 들어 C 페이지에는 Go Back버튼이 있습니다.

• 페이지 A-> 페이지 C, 클릭하여 페이지 A로 돌아갑니다.

• 페이지 B-> 페이지 C, 클릭하여 페이지 B로 돌아갑니다.

라우터에 이력 정보가 ​​있습니까?

실제로 "뒤로"API를 소유 한 내장 위치 서비스를 활용할 수 있습니다.

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

편집 :로는 charith.arumapperuma이 @ 언급 Location에서 수입해야 @angular/common소위 import {Location} from '@angular/common';라인이 중요하다.

Angular 2.x / 4.x 의 최종 버전 에서는 다음 문서가 있습니다. 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>

클릭 가능한 요소에 첨부 할 수있는 지시문에 이것을 넣을 수 있습니다.

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

용법:

<button backButton>BACK</button>

Angular 5.2.9로 테스트

당신이 버튼을 대신 앵커를 사용하는 경우 당신은 그것을 확인해야 수동 링크 와 href="javascript:void(0)"각도 위치를 작동하게하는.

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()경로 클래스에서 메소드를 구현할 수 있으며 이전 경로에 대한 정보를 제공합니다.

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

그런 다음 router.navigateByUrl()에서 생성 된 데이터를 사용 하고 전달할 수 있습니다 ComponentInstruction. 예를 들면 다음과 같습니다.

this._router.navigateByUrl(prevInstruction.urlPath);

파일 시스템에서와 같이 되돌려 야 할 때도 나를 위해 일하십시오. PS @ 각도 : "^ 5.0.0"

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

앱의 어느 곳에서나 재사용 할 수있는 버튼을 만들었습니다.

이 구성 요소 만들기

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>

참고 : Angular Material을 사용하고 있습니다 . 해당 라이브러리를 사용하지 않는 경우 mat-buttonand 를 제거하십시오 color.

이 멋진 답변을 모두 마치고 나서 내 답변이 누군가를 찾아서 도와 주길 바랍니다. 나는 경로 이력을 추적하기 위해 작은 서비스를 썼습니다. 여기 간다.

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

다른 페이지로 이동하는 동안 현재 위치를 전달하여 쿼리 매개 변수를 추가하는 방법

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을 사용하는 대신 사용자가 귀하의 페이지로 직접 방문하는 경우를 고려하여 더 안전하다고 생각합니다.

RC4에서 :

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

페이지를 새로 고치지 않고 돌아가려면 다음과 같이 html로 할 수 있습니다. javascript : history.back ()

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

베타 18 이후 :

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

각도 4 사용 preserveQueryParams에서 예 :

url: /list?page=1

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

링크를 클릭하면 edit/10?page=1매개 변수를 유지하면서 리디렉션됩니다 .

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

다른 해결책

window.history.back();