How to hide specific parameters from url in angular-CodePudding

this.router.navigate(['/'],{queryParams:{a1:a,b1:b,c1:c,d:d}}); I wanted to hide only parametes a1 and b1

Right now the browser url is fetched as https://localhost:4200/?a1=a&b1=b&c1=c&d1=d

The url should be shown as below https://localhost:4200/?c1=c&d1=d

Tried skiplocationchange but it is hiding all parameters.

CodePudding user response：

To pass hidden data between components or using the routing system in your case, I would recommend you to work with one of these features/suggestions:

Either you pass data through the routing system using the data property, check this for more details
Either you make a communication tunnel between components using Observables/Subscriptions like Subject or BehaviourSubject, check this for more details
Or, depending on your use case, passing the data through Inputs/Outputs of your components, check this for more details

Important PS: when you make a subscription using Subject or BehaviourSubject features, do never forget to unsubscribe it from your component, most probably in your ngOnDestroy(){..} lifecycle, because it would cause a memory leak issues.

CodePudding user response：

I've had a similar case recently where I wanted to remove query parameters without reloading the site. So I adapted my solution to something similar to yours.

import { ActivatedRoute, Router } from '@angular/router';

export class SomeComponent implements OnInit {
  
  queryRead = false;
  a1: any;
  b1: any;
  c1: any;
  d: any;
  constructor(
    private route: ActivatedRoute,
    private router: Router
  ) {}

  ngOnInit() {
    setQueryParams();
  }

  setQueryParams(){
    this.route.queryParams
      .subscribe(params => {
        // If you want to keep the query params
        if (!queryRead) {
          this.a1 = params['a1'];
          this.b1 = params['b1'];
          this.c1 = params['c1'];
          this.d = params['d'];
          queryRead = true;
        }
        // Remove query parameters
        this.router.navigate([], {
          relativeTo: this.route,
          queryParams: null,
          queryParamsHandling: 'merge'
        });
        // Add query parameters
        this.router.navigate([], {
          relativeTo: this.route,
          queryParams: {c1: c1, d1: d1},
          queryParamsHandling: 'merge'
        });
      }
    );
  }
}

Hope it's relevant and that I understood your problem correctly.

Edit: Added a check so that the variables aren't overwritten.