Is there a way to add a page in angular router history if nothing is there?

1
votes

I am using ionic 4 which uses angular router. There is a scenario where user can click on a category and navigate to category page. On the category page, there is a back button displayed which will take user back to the home page. However, if the user reloads the page, the back button is not shown anymore as the history has no other pages to go back to. I want to detect this scenario and add home page to history so that user has an option to go back. Is this possible? Any pointers?

1
angular-routerionic4

1 Answers

0
votes

Having in mind that angular is just a framework built over javascript, maybe there is an angular-ish way to do it. In javascript, every time the browser enters a page or section I would check the history object to know if there is any element on its stack. like this:

var numberOfEntries = window.history.length;

And if its length is zero, then you can use the new api pushState to manipulate the browser's history.

The same thing can be done with angular, as it says in its documentation:

The Angular Router ("the router") borrows from this model. It can interpret a browser URL as an instruction to navigate to a client-generated view. It can pass optional parameters along to the supporting view component that help it decide what specific content to present.

Angular router docs.

I know, that learning all of the traits in angular api is a bit cumbersome, but you will be better off knowing all that stuff. But since I believe you are in a bit of a hurry, I can tell you the fastest way to go is using the defaultHistory attribute in ionicPage object:

Pages can be navigated to using deep links from anywhere in the app, but sometimes the app is launched from a URL and the page needs to have the same history as if it were navigated to from inside of the app.

and ...

This history will only be used if the history doesn't already exist ...

I did something similar in the app we are developing at my current job, but it has been developed in ionic 1 and angularjs (I didn't get to vote which one they were going to use), so I can't really tell you if what we did would work for you. But reading the documentation on the latest ionic version, I think you can get it done with that specific property:

IonicPage

You can try with this and tell me how did it go.

By the way, we used $ionicHistory, $state, $stateProvider and the method $state.go(), to manipulate all of it, but like I told you I was on ionic 1 and angularjs.

Good Luck!