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?

vub · Accepted Answer · 2021-09-09 07:54:48Z

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

answered Sep 9, 2021 at 7:54

vub

665 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Stefan · Accepted Answer · 2021-09-09 08:01:34Z

1

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!

answered Sep 9, 2021 at 8:01

Stefan

15k17 gold badges92 silver badges155 bronze badges

Collectives™ on Stack Overflow

Angular how to route with parameters without changing the URL

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related