[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-button
and 를 제거하십시오 color
.