i am facing a situation where the navigation calls just keep stacking as can be seen in the picture bellow.
This is a problem specially because when i call the logout function it just stack another navigation entry and therefore user could use the back button to see previous screens.
Is there a way to clean the navigation entry history?
Set clearHistory to true
// Upon logout, navigate to Login / whichever component you like with `clearHistory` flag
this.$navigateTo(Login, { clearHistory: true });
Related
I am using the skipLocationChange property with true value so I can hide the URL in the browser. It is working fine. But for one of my features, I am using CanDeactivate guard so I can warn the user to save changes before leaving the current page. I am just displaying one pop-up to take confirmation from the user. If the user clicks on "OK" then he is navigating to the target page without any issue also the URL is also hidden in the browser.
But If the user clicks on the "Cancel" button then he is staying on the same page but the problem is here current page URL is getting appended to the base URL in the browser. Which I don't want. I just want the URL to be hidden with the cancel case too.
I am also attaching the link to a sample project created using stackblitz:
https://stackblitz.com/edit/angular-ivy-uqq8sg?file=src/app/app.component.html
Steps to produce an issue in sample project:
Open the user-details page by clicking on the user-details link.
Fill out the user details form and click on the page-one link then it will show a confirmation window click on cancel.
User will stay on the same page but it will also append the user-details URL in the browser.
Note: This question Router guard skip location change does not give the answer to my question because that using canActivate guard, not the canDeactivate guard. In canActivate guard we use router.navigateByURL method where we can set skipLocationChange to true value but in canDeactivate guard for canceling navigation we don't use a router.navigateByURL method
Thanks in advance.
The code is taken from here
What I changed:
In the component, return pure value, not observer so in the guard I can use it directly
return true; //return of(true)
In the guard, navigate by router service instead of just return false/true
this.router.navigate([state.url], { skipLocationChange: true });
Forked stackblitz
I have component-A(Details item page) and Component-B(selectable list page), the scenario is like when I goto component-A(Details page) and here I need to add some labels so, I goto component-B and select labels and go back to a detail page with selected labels it works fine if I go to A -> B component and B -> A component using web button. But when I navigate component-B again with the browser forward button and then select labels and go back but in this case, when I go back to component-A(Detail) at that time it reloads the component so, whatever data I have taken from component-B which is lost so, it won't reflect on component-A. this thing only happens with the browser back and forward button. in the normal web button navigation works fine.
When I goto component A -> B it will change my route. I have used routerReuseStrategy but somehow due to some blocker, I'm not able to manage my data with that.
I need to stop reloading my detail component.
Version
Angular - 7.2
Ionic - 4.12
Any ideas on how to fix this?
I have expansion panels in my sidenav and I'm keeping track of their open state and setting it. So as a different panel is opened, the state changes to reflect the panel that is open. Within my panel I have list items that on click redirect to another route. My problem is I want to keep the panel where the list item clicked open on the redirect. On the redirect to the list item route, a refresh happens and the sidenav goes back to its original state which is obviously expansion panels collapsed. The list has an on click that does a react Redirect to the path.
Answering your question without regard to React:
Store the panel state in .localStorage upon state change:
localStorage.setItem('panelState',JSON.stringify(myStateObj));
Upon .DOMContentLoaded retrieve and restore the state:
restoreState(JSON.parse(localStorage.getItem('panelState')));
If you are using React, one has to wonder why you are not using it as a SPA, but that is for another Q&A I suppose
Try using a layout with a left and right sections. Keep the state in main component and when something is clicked, update the right side that is the content section. That should do the trick without any hassle
I would say use redux or some state management lib if you have installed already its best.
another best way would be using a layout page in your main file i.e. app.js and load your routers in layout body and your layout state management will be in state management.
I have a React/Redux app that uses React-router. The app has a search area, which let's the users search for items.
There are ~200 items, so they are pre-loaded when the app starts.
The search just filters those items, without doing any further requests to the server.
When the user clicks on one of the items, the router goes to the details of that item.
Is there a best™ / common / generic way I can preserve the results and the scroll position and restore them if the user clicks on Go back while in the details view?
You could use localStotage. Create subscribe function for store like this
store. subscribe (() => {
// check here for your filter state for e.g.
localStotage.setItem(...)
})
and then load from localStorage if needed on this page
On my Single Page Application (Javascript (AngularJs) webapp), I'm displaying a paginated items list.
I'm displaying 10 items per page.
In order to retain the current pagination opened by the user at any time while this one navigates on other page, I put the current page number on browser's localStorage.
Here's an example of workflow:
The user goes to myItemsList.html.
He opens the page 2 involving the url: myItemsList.html?page=2.
Then, he goes to another page: myOtherPage.html.
He goes back to the link initially pointing to myItemsList.html, that displays directly thanks to localStorage the page myItemsList.html?page=2 in order to potentially continue his navigation.
Would it confuse the user, maybe expecting to see the page 1 as a new starting navigation.
If I display at the top of the list, a kind of label like "Page 2" in order to warn him that he's seeing the preceding portion of his navigation, isn't it UX-friendly?
Or should I completely avoid persisting current pagination?
Here's what could happen if I don't persist the current viewed page:
The user goes to myItemsList.html.
He opens the page 2 involving the url: myItemsList.html?page=2
He opens an item in this page (the "show" page), leading to: myItemsList.html?id=123
He clicks on the browser's back button, causing a refresh of myItemsList.html (since a Single Page Application). The current pagination (page 2) would be lost and the user would need to restart it in order to continue its items discovery.
This seems really touchy...
What strategy should I choose for a use case like this?
saving the progress through navigation is the expected behavior in UX design of SPA, so maintaining the page he was in the correct choice, and since it is a pagination it won't be an issue even if the user wants to go back to any page, it will only take a click.
First of all I would avoid using localstorage and use a service instead to persist ur page counter.
Secondly u dont need to persist pg counter to anywhere else but in a scope variable for refreshing to mext page data. You can even think about just adding to results similar to infinitite scroll use cases. But either way, u can use local scope variable for pagination.
Whether to go directly to last viewed page - is a more business decision and will depend on needs.
But u can very easily persist or remove persisted data using broadcast and watch and decide on persistence based on event listened to.
Hope thos helps ...
How about maitaining a sort of heirerachy in JS like this :
Suppose a user navigates to a section called Customer Search
customer_search.customer_display.page = 2
Where customer_search is the a subsection , customer_display is the view with pagination you are targetting .
menu.menu_items.page=7
Where menu is the subsection , menu_items is the view with pagination
Might work if your application is organized in a reasonably hierarchical manner .
Probably you could also maintain the page in $scope for that particular controller .
The URL should dictate the navigation.
When I navigate to your website, e.g. example.com, I expect to be on the first page.
When I navigate to a (bookmarked) page of your website, e.g. example.com?page=2, I expect to be on the second page.
When I hit the back button, I expect to be presented with the previous page exactly as it was when I left it. You don't need to refresh the entire page, just listen to the history events and update accordingly.
And I strongly believe that this question doesn't belong to stackoverflow...