TL;DR; I want to route to a page with parameters without the URL indicating underlying data.
I have 2 components. Component A & B. What I'd like to achieve is route to B but I need some paramteres from A. I know i can route to B by setting route like this [/B:parameter]. My problem is that it's changing the URL from localhost:4200/b to something like localhost:4200/b=?parameter. I'd like to hide parameter from users as it's:
-one: not relevant to them
-two: may contain sensitive business logic &/or data.
Currently I just set a constant to the appropriate state and read it on B's onInit but that feels very unelegant, and there should be a better, more elegant way to do things. Quite frankly it works well but I don't like it. How should I approach it?
Short answer: Passing data in route while navigate.
Explanation: You can found the data parameter in Route document (https://angular.io/api/router/Route)
Example: In routing module:
path: 'auth', component: AuthComponent, data: { type: 'admin' }
In AuthComponent you able to take the type data by using ActivateRoute
constructor(
private activatedRoute: ActivatedRoute
) {
this.type = this.activatedRoute.snapshot.data.type;
}
So you can ask: How to dynamically passing data while routing? Please check it out: Send data through routing paths in Angular
You can change the browser url without triggering any navigation by using e.g:
window.history.replaceState(undefined, '', '#newdata');
See: https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState
But be really careful with that!