Navigate in Angular 7 without adding parameter to URL

Question

I want to navigate between two routes in Angular 7 with posting data between them. But I don;t want to show those parameter in URL. How to do it in proper way?

at this moment I am strugging with something like this:

this.router.navigate(['/my-new-route', {data1: 'test', test2: 2323, test: 'AAAAAAA'}]);

and it change my url to

http://localhost:4200/my-new-route;data1=test;test2=2323;test=AAAAAAA

how to do it to cancel those data from url:

http://localhost:4200/my-new-route

Edit:

My case:

1. /form - route with some form
2. /options - route with some data

on /form route - users have some form with empty fields to fill manually

but on /options page there is some preset configuration, when user choose one is navigated to /form and fields are fill autmatically

when they move back to another page and back again to /form - should see empty form. Only link from /options to /form should fill those fields.

Answer 1

There are few ways to do it.

Try 1 :

this.router.navigate(['/some-url'], { queryParams:  filter, skipLocationChange: true});

Try 2 :

We can use this work around instead by using EventEmitter and BehaviorSubject with a shared service

In component 1:

this.router.navigate(['url']).then(()=>
    this.service.emmiter.emit(data)
)

In service :

emmiter : EventEmitter = new EventEmitter();

In component 2: inside constructor

this.service.emmiter.subscribe();