-2

I was following this answer https://stackoverflow.com/a/44865817/7407321 to navigate to a url using queryParams. I am following the 3 way in which we can pass value to url.

<a routerLink='/search' queryParams='{query:india,start:0,rows:10,resultDisplay:video,mode:text}'><li [class.active_view]="Display('videos')" (click)="videoClick()">Videos</li></a>

But clicking on the link redirects me to this URL 

http://localhost:4200/search?0=%7B&1=q&2=u&3=e&4=r&5=y&6=%3A&7=i&8=n&9=d&10=i&11=a&12=%2C&13=s&14=t&15=a&16=r&17=t&18=%3A&19=0&20=%2C&21=r&22=o&23=w&24=s&25=%3A&26=1&27=0&28=%2C&29=r&30=e&31=s&32=u&33=l&34=t&35=D&36=i&37=s&38=p&39=l&40=a&41=y&42=%3A&43=v&44=i&45=d&46=e&47=o&48=%2C&49=m&50=o&51=d&52=e&53=%3A&54=t&55=e&56=x&57=t&58=%7D

rather than this 

http://localhost:4200/search?query=india&start=0&rows=10&resultDisplay=video&mode=text

What I am doing wrong?

Aakash Singh
  • 41
  • 1
  • 8

2 Answers2

1

You need to wrap your queryParams property in square brackets, since it's a property binding.

<a routerLink='/search' [queryParams]="{query:'india',start:'0',rows:'10',resultDisplay:'video',mode:'text'}"><li [class.active_view]="Display('videos')" (click)="videoClick()">Videos</li></a>
Aamir Khan
  • 2,945
  • 2
  • 25
  • 32
  • Your answer was really helpful but after wrapping the url becomes like this `http://localhost:4200/search?query=undefined&start=0&rows=10&resultDisplay=undefined&mode=undefined` – Aakash Singh May 25 '18 at 21:54
  • The terms are replaced by `undefined` – Aakash Singh May 25 '18 at 21:54
  • @AakashSingh try wrapping the values for each query in single quotes, and use double quotes for the entire string. Check out my updated answer. – Aamir Khan May 25 '18 at 21:59
  • After wrapping the values for each query in single quotes, and use double quotes for the entire string, I made a query like this `fq:'fq:'url_file_ext_s%3A(avi%2BOR%2Bmov%2BOR%2Bflw%2BOR%2Bmp4)'` .Now in url corresponding string becomes like this `fq=url_file_ext_s%253A(avi%252BOR%252Bmov%252BOR%252Bflw%252BOR%252Bmp4)` which is unexpected – Aakash Singh May 25 '18 at 22:17
  • I do not know how `25` is appended before each number in url. – Aakash Singh May 25 '18 at 22:18
1

use property binding to pass parameters, [queryParams]

<a routerLink='/search' [queryParams]="{query:'india',start:0,rows:10,resultDisplay:'video',mode:'text'}"><li [class.active_view]="Display('videos')" (click)="videoClick()">Videos</li></a>
Fateh Mohamed
  • 20,445
  • 5
  • 43
  • 52
  • Your answer was really helpful but after wrapping the url becomes like this`http://localhost:4200/search?query=undefined&start=0&rows=10&resultDisplay=undefined&mode=undefined` – Aakash Singh May 25 '18 at 21:56
  • The terms are replaced by `undefined` – Aakash Singh May 25 '18 at 21:57
  • try this "{query:'india',start:0,rows:10,resultDisplay:'video',mode:'text'}" – Fateh Mohamed May 25 '18 at 21:59
  • After wrapping the values for each query in single quotes, and use double quotes for the entire string, I made a query like this `fq:'fq:'url_file_ext_s%3A(avi%2BOR%2Bmov%2BOR%2Bflw%2BOR%2Bmp4)'` .Now in url corresponding string becomes like this `fq=url_file_ext_s%253A(avi%252BOR%252Bmov%252BOR%252Bflw%252BOR%252Bmp4)` which is unexpected – Aakash Singh May 25 '18 at 22:19
  • I do not know how `25` is appended before each number in url. – Aakash Singh May 25 '18 at 22:19
  • please check my answer here, use Url serializer to replace your character https://stackoverflow.com/a/49618237/4399281 – Fateh Mohamed May 25 '18 at 22:30
  • for your case it's function cleanUrl(url) { return url.replace('%25','%') // for example to delete parenthesis } – Fateh Mohamed May 25 '18 at 22:31