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

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.