How to use a "complete Url" (url with params) for navigation in Angular

Question

I have a search page with lots of filter options, these options are all passed to the url as params on the search page (so it is possible to share a search). when going to a detail page for one row in the search result, then I are parsing the complete Url for the search result to the detail page as a parameter (detail/1?returnUrl=%2Fsearch%2Fresults%3Fsw%3D%26n%3D%26ee%3D2%26a....), to make it possible to go back (on the detail page there are some tabs that is navigate to with routerlink, so I can't use any history back for navigating back to the search result).

The questions is, I have a complete URL on my detail page (eg. /search/result?a=1&b=people&c=8&d=all&p1=1), how do I navigate to that url?

If I put it in a routerlink="/search/result?a=1&b=people&c=8&d=all&p1=1" it isn't working.

Thanks very much in advance :)

UPDATE

I have tried the following, but it is not working:

 public goBack() {
    const returnUrl = this.activatedRoute.snapshot.queryParamMap.get('returnUrl');

    const array1 = returnUrl.split('?');
    const array = array1[1].split('&');

    let parameters = '';

    array.forEach(param => {
        const param1 = param.split('=');
        parameters += `${param1[0]}:'${param1[1]}',`;
    });

    this.router.navigate([array1[0]], { queryParams: {parameters} });

}

It writes the following link in the URL:

http://localhost:4200/search/results?parameters=sw:%27%27,n:%27%27,ee:%272%27,a:%27true%27,l:%27%27,c:%27%27,ad:%27%27,cr:%27%27,pn:%271%27,s:%271%27,sd:%271%27,

Troels Lenda · Accepted Answer · 2020-01-12 13:31:14Z

1

EDIT: Answer to your updated question

the method navigate in Angulars router accepts Params as argument for the property queryParams - not a string.

public goBack() {
    const returnUrl = this.activatedRoute.snapshot.queryParamMap.get('returnUrl');

    const array1 = returnUrl.split('?');
    const array = array1[1].split('&');

    let parameters = {};

    array.forEach(param => {
        const param1 = param.split('=');
        parameters[param1[0]] = param1[1];
    });

    this.router.navigate([array1[0]], { queryParams: parameters });

}

Below: Answer to question as it previous was formulated

Query parameters should be passed in their own property.

Check the examples at https://angular.io/api/router/RouterLink#description

<a [routerLink]="['/search/result']" [queryParams]="{ 'a': 1, 'b': 'people', 'c': 8, 'd': 'all', 'p1': 1}">
  Products
</a>

edited Jan 12, 2020 at 13:31

answered Jan 11, 2020 at 8:57

Troels Lenda

5242 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

PNR Over a year ago

Thanks very much for your reply! then I have to manually split up the string with query parameters and build the queryParams like you have shown above? Are there any easy way to do that?

PNR Over a year ago

Perfect! Thanks very much. Just for the note. The last line shall be: this.router.navigate([array1[0]], { queryParams: parameters }); (With out the bracket around parameters)

Collectives™ on Stack Overflow

How to use a "complete Url" (url with params) for navigation in Angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related