Remove previous route entry in browser for Angular app - javascript

When I am navigating to component then I am using this code
this.router.navigate(['', ROUTE_CONSTANTS.CONTRACT, ROUTE_CONSTANTS.CONTRACT_EDIT, {selectedContract: btoa(JSON.stringify(selectedContract))}]);
this brings to edit page now there is cancel button on edit page and that should bring to previous page
this.router.navigate(['/', ROUTE_CONSTANTS.CONTRACT],{
queryParamsHandling: 'merge'
});
everything works well, but while navigating from cancel button in browser url previous url path with all parameters are still there like this :
http://localhost:4200/contract/edit;selectedContract=eyJuYW1lIjoiMTBmZWIxIiwidmVyc2lvbiI6InYxIiwiZW52aXJvbm1lbnROYW1lIjoiaW50ZWciLCJlbnZpcm9ubWVudElkIjoiZjBmOGNiYTAtY2U0MS00ODQ5LWFjZjEtMjkxODRlMmE2N2M1IiwiZW52aXJvbm1lbnRUeXBlIjoiTm9uLVByb2R1Y3Rpb24iLCJleHRlcm5hbElkIjoiMWJiNDgyNTQtODJiMS00ZWFlLWFlMjAtOTE0NTAxOTNlYzdkIiwiZGVzY3JpcHRpb24iOiJ0ZXN0MSAxMGZlYjEiLCJhc3NldFR5cGVJZHMiOlsiY29yZS5iYXNpY2FyZWEiLCJjb3JlLmJhc2ljc2l0ZSJdLCJtb2RpZmllZE9uIjoiMjAyMi0wOC0wMSAwNjozMjoxMi4zMiIsImluZGV4IjoxLCJzdGF0dXMiOjEsInN0YXR1c1RleHQiOiJPREFUQV9DT05UUkFDVC5TVEFUVVMuT
I want to remove
/edit;selectedContract=eyJuYW1lIjoiMTBmZWIxIiwidmVyc2lvbiI6InYxIiwiZW52aXJvbm1lbnROYW1lIjoiaW50ZWciLCJlbnZpcm9ubWVudElkIjoiZjBmOGNiYTAtY2U0MS00ODQ5LWFjZjEtMjkxODRlMmE2N2M1IiwiZW52aXJvbm1lbnRUeXBlIjoiTm9uLVByb2R1Y3Rpb24iLCJleHRlcm5hbElkIjoiMWJiNDgyNTQtODJiMS00ZWFlLWFlMjAtOTE0NTAxOTNlYzdkIiwiZGVzY3JpcHRpb24iOiJ0ZXN0MSAxMGZlYjEiLCJhc3NldFR5cGVJZHMiOlsiY29yZS5iYXNpY2FyZWEiLCJjb3JlLmJhc2ljc2l0ZSJdLCJtb2RpZmllZE9uIjoiMjAyMi0wOC0wMSAwNjozMjoxMi4zMiIsImluZGV4IjoxLCJzdGF0dXMiOjEsInN0YXR1c1RleHQiOiJPREFUQV9DT05UUkFDVC5TVEFUVVMuT
while coming back on contract route
I tried approaches based on this link : How to update previous page URL in Angular
But still I am not able to do so

Related

Back to previous page instead of previous url in next js

I faced a problem where I have some filters on a page. When you filter, the page URL will change and the query string will add to the end of the URL.So when you click on the back button, the page will stay on the current page and will back to the previous query string. What I want is to get back to the previous page which is come from that to the current page.
For example, I am on /home page, then I go to /browse page, then I filter some items and my URL will /browse?subject=2 and I filter again and the URL will be changed to /browse?subject=2&vendor=2. Now I want to the previous page (I mean /home), when I click on the back button I will go to /browse?subject=2. I hope I have conveyed what I mean.
What you need to do is in your /browse page when you are filtering use router.replace instead of router.push in this way, your filter result won't be added into the browser history and when you try to use router.back you would go to the previous page.

Here i need to prevent from reload my angular component when we are navigating to browser back and forward button

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?

Add history item to html browser history without changing page angular

I'm attempting to rewrite a small part of user history as soon as they visit my angular application.
Currently I'm attempting to change the last history item to a certain page once the app loads, however instead of just changing the history, the current page/url also changes.
In my app.js where I define my routes for angular I also have a .run containing
history.pushState({}, 'Restaurants List', document.URL.match(/.+#\//).toString() + 'orders/restaurants')
this instantly will change my url from the intended target to the new history entry.
I've also tried using replaceState without any success.
A solution I've thought of is first changing the history then redirecting the user which works fine, but I want to avoid that additional overhead.
Is there any way to just add to the history without going to it so that if the user hits back it goes to a different page?

Previous Page in Angular.js

i am working in AngularJs and i have a problem.
When the user push the login button, the page go back to the previous page, but i only want go back if one of the routeprovider page and go to "/" route if teh previous page is another page. Actualy i use:
if (history.length > 1)
{
history.back();
}
else
{
$location.url("/");
}
How can i see the previous page url and compare it?
JavaScript allows navigation based on window.history, but it does not allow reading the actual history. So you cannot check the previous URL.
You may want to try document.referrer to check the previous URL (before entering the AngularJS app, I presume, as after entering you do not reload the page).
You may also build your history manually in AngularJS to see whether you have previously been navigating through your application: angularjs getting previous route path
$scope.$on('$routeChangeStart', function(next, current) {
... you could trigger something here ...
});
Please refere to $routeChangeStart of angular which might help you for your query.

Backbone render method called but different view displaying on back button press

I have a backbone.js application, and I'm running into a situation where I need to reload a url. In other words, the user is on a current url, and I need to reload the page. To do so, I'm using the solution from this post: Backbone: Refresh the same route path for twice. So if my route looks like this:
"patrons/new(/)":"newPatron",
then I reload the page by calling
router.newPatron();
This all works great. The problem is when I hit the back button. The url will change and go back through the history, but the view doesn't change. On each back button click, the correct render methods are getting called.
So the url and render methods are corresponding to the backbutton changes, but the view is not changing correctly. It is reloading each time I press the back button though?
Anyone know how to fix this?

Categories

Resources