Angular how to route with parameters without changing the URL

Question

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?

Answer 1

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

Answer 2

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!