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

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;
    ...
}

Answer 2

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

Answer 3

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;
    })
...
}

Answer 4

pass value through "state" key from which you want to naviagte to next component:

//From where we Navigate
import {ActivatedRoute, NavigationExtras, Router} from "@angular/router";
export class MainPageComponent {
  constructor(public router:Router) {}
   navWithExtraValue () {
          const navigationExtras: NavigationExtras = {
            state: {
                editMode: true
            },
        };
      }
  }


 //In constructor where we Navigated
 constructor(public router:Router,
    public route:ActivatedRoute){
      this.route.queryParams.subscribe(data=> {
        if (this.router.getCurrentNavigation().extras.state) {
            this.editMode = this.router.getCurrentNavigation().extras.state.editMode;
        }
    });

We don't see these value in url