Angular 9 - Routing - Stack History (Clear)

user_2622718 0
Viewed 2809

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.

angular9 angular routes history
1 Answers

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
})
user_120778170
Related