Angular 2 - Navigate without showing data on url

Question

In Angular 2, is there a way to navigate and pass data that is not shown in the URL?

I want to create a component that receives a complex object, but do not want this to be displayed in the URL.

Thanks!

Answer 1

Only to support new readers who are using new versions of angular, in angular 7.2 and above you can use state to pass data objects dynamically without showing in url.

this.router.navigate(['/some-route'], {state: {data: {...}}});

then you can read state like:

ngOnInit() {
    this.state = this.activatedRoute.paramMap
        .pipe(map(() => window.history.state));}

Answer 2

If you are using navigate method, then add skipLocationChange like this:

this.router.navigate(['/your-path'], { skipLocationChange: true });

If you're using routerLink, use it as an attribute like this:

<a [routerLink]="['/your-path']" skipLocationChange></a>

Please bear in mind that if you use skipLocationChange, the route in the browser won't be updated after navigating to the new route, so if the user hits back in the browser he'll be sent to the path before the first path. I haven't found a solution for this yet.

Answer 3

You can use below function to pass parameters:

this.router.navigate(['/somePage'], {queryParams: {'name': 'Emon'}, skipLocationChange: true});

This works for me!

Answer 4

Yes it can be done.. Below is an example from this link.

const appRoutes: Routes = [
  { path: 'hero/:id', component: HeroDetailComponent },
  { path: 'crisis-center', component: CrisisCenterComponent },
  {
    path: 'heroes',
    component: HeroListComponent,
    data: {
      title: 'Heroes List'
    }
  },
  { path: '', component: HomeComponent },
  { path: '**', component: PageNotFoundComponent }
];

In this example we are passing an object to 'heroes' path which will not be displayed in url.Hope this helps.