क्या एंगुलर 2 में अंतिम पृष्ठ पर वापस जाने का एक स्मार्ट तरीका है?
कुछ इस तरह
this._router.navigate(LASTPAGE);
उदाहरण के लिए, पृष्ठ C में एक Go Backबटन है,
पृष्ठ A -> पृष्ठ C, इसे क्लिक करें, पृष्ठ A पर वापस जाएं
पृष्ठ B -> पृष्ठ C, इसे क्लिक करें, पृष्ठ B पर वापस जाएं।
क्या राउटर को यह इतिहास की जानकारी है?
जवाबों:
वास्तव में आप अंतर्निहित स्थान सेवा का लाभ ले सकते हैं, जो "बैक" एपीआई का मालिक है।
यहाँ (टाइपस्क्रिप्ट में):
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';लाइन महत्वपूर्ण हो।
Locationराज्यों के लिए आधिकारिक Angular2 API प्रलेखन : "ध्यान दें: मार्ग परिवर्तनों को ट्रिगर करने के लिए राउटर सेवा का उपयोग करना बेहतर है। केवल स्थान का उपयोग करें यदि आपको रूटिंग के बाहर सामान्यीकृत URL के साथ सहभागिता या निर्माण करने की आवश्यकता है।" @ सासक्सा का जवाब स्पष्ट रूप Routerसे ऐसा करने के लिए उपयोग करने का एक तरीका दिखाता है । हालांकि, Locationविधि निश्चित रूप से अधिक सुविधाजनक है। क्या किसी को पता है कि Routerविधि विधि की तुलना में अधिक सही क्यों हो सकती है Location?
कोणीय 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>
आप एक बटन के बजाय एक लंगर का उपयोग करते हैं आप इसे एक बनाना चाहिए निष्क्रिय लिंक के साथ 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>javascript:void(0)। कुछ इस तरह ... @Directive({ selector: '[clickPreventDefault]' }) export class ClickPreventDefaultDirective { @HostListener("click", ["$event"]) onClick($event: Event) { $event.preventDefault(); } }
आप routerOnActivate()अपने मार्ग वर्ग पर विधि को लागू कर सकते हैं , यह पिछले मार्ग के बारे में जानकारी प्रदान करेगा।
routerOnActivate(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction) : any
तब आप router.navigateByUrl()से उत्पन्न डेटा का उपयोग और पास कर सकते हैं ComponentInstruction। उदाहरण के लिए:
this._router.navigateByUrl(prevInstruction.urlPath);
routerOnActivate
मेरे लिए भी काम करें जब मुझे फ़ाइल सिस्टम में वापस जाने की आवश्यकता हो। पीएस @ भाषा: "^ 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>
नोट: यह कोणीय सामग्री का उपयोग कर रहा है, यदि आप उस पुस्तकालय का उपयोग नहीं कर रहे हैं तो mat-buttonऔर निकालें 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;
});
यदि रिटर्न यूआरएल मौजूद है तो बैक बटन को सक्षम करें और जब उपयोगकर्ता बैक बटन पर क्लिक करे
this.router.navigateByUrl(this.returnUrl); // Hint taken from Sasxa
यह पिछले पृष्ठ पर नेविगेट करने में सक्षम होना चाहिए। स्थान.बैक का उपयोग करने के बजाय मुझे लगता है कि उपरोक्त विधि उस स्थिति पर विचार करने के लिए अधिक सुरक्षित है जहां उपयोगकर्ता आपके पृष्ठ पर सीधे लैंड करता है और यदि वह बैक बटन को लोकेशन के साथ दबाता है तो यह उपयोगकर्ता को पिछले पृष्ठ पर रीडायरेक्ट करेगा जो आपका वेब पेज नहीं होगा।
RC4 में:
import {Location} from '@angular/common';
पृष्ठ को रीफ्रेश किए बिना वापस जाने के लिए, हम HTML में जावास्क्रिप्ट की तरह कर सकते हैं : history.back ()
<a class="btn btn-danger" href="javascript:history.back()">Go Back</a>
Locationइसके बजाय सेवा का उपयोग करने की सलाह दूंगा। सरकारी एपीआई
कोणीय 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();