Hide query parameters after parsing them in my url

Question

my frontend is in http://host:4200 and when the other frontend wants to open it for example with window.open(http://host:4200?username=a&department=b) so this http://host:4200?username=a&department=b will be in the address bar, How can I remove query parameters from this url?

if i use this two lines of code to hie the query params it works but with delay, because i remove after reading url so for a second query params are visible:

const url1 = window.location.toString();
const sanitizedUrl = url1.substring(0, url1.indexOf('?'));
window.history.replaceState({}, document.title, sanitizedUrl);

This is my cpp.component.ts code which i need to read query params in it, it s with angular 5,

 @Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  username = '';
  department = '';  

  constructor(
    private feedbackService: ApiService,
    private titleService: Title,
     private route: ActivatedRoute) {
  }

  ngOnInit() {

    this.route.queryParams.subscribe(params => {
      if (params.hasOwnProperty('username')) {
        this.username = params['username'];
      }

      if (params.hasOwnProperty('department')) {
        this.department = params['department'];
      }

    });
  }

@Damith exactly i need to remove it after read those parameter, but how can i remove it? — Fariba, Jun 15 '19 at 02:51

Vaibhav · Answer 1 · 2019-06-14T03:41:43.810

0

You can use the skipurlchange property with router.navigate

constructor(private router:Router){}

this.router.navigate(['/yourview'], { queryParams:  youParam ,skipLocationChange: true });

edited Jun 14 '19 at 03:41

answered Jun 14 '19 at 03:36

Vaibhav

1,481
13
17

You missed a `,` between `queryParams` and `skipLocationChange` – dcg Jun 14 '19 at 03:41
@Vaibhav Kumar Goyal Thank you for your answer, what can i put in ['/yourview'] ? and is this code supported by different browsers? and query params will be saved in the history of the browsers? – Fariba Jun 14 '19 at 13:53
@Vaibhav Kumar Goyal i edited my question to explain more, this query params comes when other front-end use my web with window.open(myurl?username=a&department=b) then i need to read these params in app.component.ts but i do not want user see all those params in the url, – Fariba Jun 15 '19 at 03:01
@Fariba in`['/yourview']` will be the route name for the new page which is registered to receive these params. Create a base route and register it with app.component .Lets say you have a button on your first default app load then on click of that button register a function which should do as i show in my answer .This is supported in all the browsers – Vaibhav Jun 17 '19 at 04:01

Hide query parameters after parsing them in my url

1 Answers1