কৌনিক 2 এ শেষ পৃষ্ঠায় ফিরে যাওয়ার কোনও স্মার্ট উপায় আছে?
কিছুটা এইরকম
this._router.navigate(LASTPAGE);
উদাহরণস্বরূপ, পৃষ্ঠা সিতে একটি Go Backবোতাম রয়েছে,
পৃষ্ঠা এ -> পৃষ্ঠা সি, এটিতে ক্লিক করুন, পৃষ্ঠার পৃষ্ঠায় ফিরে যান
পৃষ্ঠা বি -> পৃষ্ঠা সি, এটিতে ক্লিক করুন, বি পৃষ্ঠায় ফিরে যান
রাউটারের কি এই ইতিহাসের তথ্য আছে?
উত্তর:
প্রকৃতপক্ষে বিল্ট-ইন লোকেশন পরিষেবাদির সুবিধা নিতে পারেন, এটি একটি "পিছনে" এপিআইয়ের মালিক।
এখানে (টাইপস্ক্রিপ্টে):
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উল্লেখ করেছে: "দ্রষ্টব্য: রুট পরিবর্তনগুলি ট্রিগার করতে রাউটার পরিষেবাটি ব্যবহার করা ভাল। আপনি যদি রাউটিংয়ের বাইরে যোগাযোগ করতে বা সাধারণীকৃত 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
আমার যখন ফাইল সিস্টেমের মতো ফিরে যেতে হবে তখনও আমার জন্য কাজ করুন। PS @angular: "^ 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
এটি পূর্ববর্তী পৃষ্ঠায় নেভিগেট করতে সক্ষম হওয়া উচিত। লোকেশন.ব্যাক ব্যবহার করার পরিবর্তে আমি অনুভব করি যে উপরের পদ্ধতিটি ব্যবহারকারীরা আপনার পৃষ্ঠায় সরাসরি অবতরণ করছে এবং যদি তিনি লোকেশন সহ পিছনের বোতামটি টিপেন তবে এটি আগের পৃষ্ঠায় ব্যবহারকারীকে পুনঃনির্দেশ করবে যা আপনার ওয়েব পৃষ্ঠা হবে না।
আরসি 4 তে:
import {Location} from '@angular/common';
পৃষ্ঠাটি রিফ্রেশ না করে ফিরে যেতে, আমরা জাভাস্ক্রিপ্টের নীচের মতো এইচটিএমএল করতে পারি : ইতিহাস.ব্যাক ()
<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#!# লিঙ্ক- পরিমিতি- অ্যারে
আর একটি সমাধান
window.history.back();