javascript - Keep applied filters on browser back and forward Angular 2 - Stack Overflow

admin管理员组

文章数量:1399180

I have product listing page, where I do have all data to show user, if user is applying filters, I am filtering list on client side itself using Angular 2,

Now if user move forward to project details page and click browser back button, all applied filters vanished as it should be, But I need to implement so that on back button all applied filters should persist.

Solutions I am thinking: -

Approach : Whenever User apply filter we add that in URL and redirect.

Problem : On every URL redirect API's will be called.

Is there a better way I can approach this problem ?

I have product listing page, where I do have all data to show user, if user is applying filters, I am filtering list on client side itself using Angular 2,

Now if user move forward to project details page and click browser back button, all applied filters vanished as it should be, But I need to implement so that on back button all applied filters should persist.

Solutions I am thinking: -

Approach : Whenever User apply filter we add that in URL and redirect.

Problem : On every URL redirect API's will be called.

Is there a better way I can approach this problem ?

• javascript
• node.js
• angular
• single-page-application

Share Improve this question Follow edited May 26, 2016 at 6:00 Arun Tyagi asked May 26, 2016 at 5:14 Arun TyagiArun Tyagi 2,25655 gold badges2626 silver badges3838 bronze badges 1

• the question seems resolved but in any case this should help ; softwarearchitekt.at/post/2016/12/02/… – Ktt Commented Jul 25, 2017 at 12:55

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Storing things in the URL as arguments is a good approach, since you don't depend on hidden state (global application variables) to build your view.

However I'd not intercept the routing ponent, but rather use Angular's support for structured URLs and filter the data in the onInit method or whenever it is available.

If you want the filter criteria being visible in the URL (and to be bookmarkable) use router parameters and redirect to the URL containing the updated parameters. If you use routerCanReuse() { return true; }, then the ponent is not even reloaded but justrouterOnReuse()` is called where you can acquire the updated parameters.

If you don't want the filter criteria to appear in the URL, use a shared service to store the parameters, then navigating doesn't destroy the parameter values. Ensure that the provider for the service is provide high enough (AppComponent for example) for it to not get destroyed when a ponent gets destroyed by routing away.

I had a similar problem with the added condition that, I had to redirect the user back to listing page with the filters applied when he used the save functionality. The approach I used was to bing both a service and having filters in the URL parameters.

The reason to use both is, You could enter the product detail page in 3 ways:

1. From Product Listing.
2. Directly from URL.
3. From some other, where you might have given the link.

And so you cannot just use this._location.back(); as you might not want to redirect to the last page in all cases. So my approach was to store the last URL in a service, and in the detail ponent check if there is any stored URL.

An important thing here is to check and pop the stored URL on the ngOnInit() as the user might not always click on save.

Attaching the code to the service, it's fairly basic.

@Injectable()
export class ReturnHistoryService {

   private _returnURL: string;

   saveReturnURL(returnURL: string) {
     this._returnURL = returnURL;
   }

   popReturnURL() {
       let returnURL = this._returnURL;
       this._returnURL = null;
       return returnURL;
   }

`

Make sure the provider is not per ponent.

本文标签： javascriptKeep applied filters on browser back and forward Angular 2Stack Overflow