2

is it possible with angular 9 routing to manage a scenarious as described below?

There are three page (A, B and C). The user enters in the page A (this is a registration page), then he inserts registration data and he enters in the second page (B) where he must insert a confirmation code. I would like that from this page the user can go forward (page C) and clear history (page a and b not more accessible with back function), but he can go back on the page A. Is this possible?

A -> B -> C [When in C, A e B not more available] A -> B -> A [When in B, i can go back in A]

Thanks in advance.

Marco Grieco
  • 229
  • 2
  • 6
  • 16
  • Should these pages be unreachable by typing the url directly to browser's address bar after user gets to page C? – Shlang May 23 '20 at 15:54
  • 1
    It's an ionic application...no – Marco Grieco May 23 '20 at 16:02
  • Does this answer your question? [Angular 5: remove route history](https://stackoverflow.com/questions/51427689/angular-5-remove-route-history) And one more [similar question](https://stackoverflow.com/questions/55057685/ionic-4-angular-router-navigate-and-clear-stack-history-of-previous-page) specific for Ionic with the same answer – Shlang May 23 '20 at 16:17
  • Depending on your requirement, you can use `skipLocationChange` or `replaceUrl`: https://angular.io/api/router/NavigationExtras#replaceUrl – David May 23 '20 at 16:24
  • ReplaceUrl covers only the first case. If I am in the page B and I would like to go back page A it's not possible if I use replaceUrl – Marco Grieco May 23 '20 at 16:56
  • 2
    Could you create a StackBlitz so we can have something to start with? – Andrei Gătej May 23 '20 at 17:31

1 Answers1

1

There're multiple ways to do this. Two of them are mentioned below:

  • You will manipulate the history manually with the native browser location.history API.
  • Create a service with a rxjs/subject that contains the isRoute data. Instantiate it in the next page (after B). Check the data & perform the route.

Personally, I would prefer the 2nd one. To do this:

1) Generate a service with you preferred name.

2) In the service, create a subject that will store the data of our route (isAllowed) (Initially set to true).

3) In your Page B access it as a private class variable in the constructor as well as the router for routing.

constructor(private service: ServiceName, private router: Router) {}

4) Check whether the value isAllowed is true or not by subscribing to the isAllowed subject. If not, route to the preferred component.

this.service.isAllowed.subscribe({isAllowed} => {
  isAllowed ? this.router.navigate("component path here") : false
})
Yogesh Aggarwal
  • 1,071
  • 2
  • 12
  • 30