Navigate in Angular 7 without adding parameter to URL

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();

another solution for passing information from one route to another without touching the query params is via the state field of NavigationExtras (as of Angular 7.2+)

something along these lines

// Publish
<a
  [routerLink]="['/studies', study.id]"
  [state]="{ highlight: true }">
  {{study.title}}
</a>

// Subscribe
constructor(private route: ActivatedRoute, ...) {
}

public highlight: boolean;

public ngOnInit() {
...
    this.route.paramMap
      .pipe(map(() => window.history.state))
      .subscribe(state => {
        this.highlight = state && state.highlight;
    });
...
}

// Alternative
constructor(private router: Router, ...) {
}

public highlight: boolean;

public ngOnInit() {
...
    this.router.events.pipe(
      filter(e => e instanceof NavigationStart),
      map(() => this.router.getCurrentNavigation().extras.state)
    )
    .subscribe(state => {
        this.highlight = state && state.highlight;
    })
...
}

You can create a service and share it between both the components (the one that you're moving from, and the one that you're moving to).

Declare all the parameters that you want to pass to the URL, in the service, and before the router.navigate([]), set the values for parameters in the service.

You can access those parameters from the other component with that service.

Example:

SharedService

import { Injectable } from '@angular/core';

@Injectable({
    providedIn: 'root'
})
export class SharedService {
    data1;
    test2;
    test;
}

Component1

import { SharedService } from 'location';
import { Router } from '@angular/router';
...
constructor(private _sharedService: SharedService,
            private _router: Router) { }
...
this._sharedService.data1 = 'test'
this._sharedService.test2 = 2323;
this._sharedService.test = 'AAAAAAAA';
this._router.navigate(['/my-new-route']);
...

Component2

import { SharedService } from 'location';
...
private test2;
private test;
private data1;
constructor(private _sharedService: SharedService){ }
ngOnInit() {
    this.data1 = this._sharedService.data1;
    this.test2 = this._sharedService.test2;
    this.test = this._sharedService.test;
    ...
}