Параметры запроса изменяются в URL-адресе после маршрута в Angular

Я следил за этим ответом https://stackoverflow.com/a/44865817/7407321, чтобы перейти к URL-адресу с помощью queryParams. Я следую 3 способам передачи значения в 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>

Но нажатие на ссылку перенаправляет меня на этот 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

а не это

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

Что я делаю неправильно?


typescript angular routing angular4-router
person Aakash Singh    schedule 25.05.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

использовать привязку свойства для передачи параметров, [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>
person Fateh Mohamed    schedule 25.05.2018
comment
Ваш ответ был действительно полезен, но после переноса URL становится такимhttp://localhost:4200/search?query=undefined&start=0&rows=10&resultDisplay=undefined&mode=undefined - person Aakash Singh; 26.05.2018
comment
Термины заменены на undefined - person Aakash Singh; 26.05.2018
comment
попробуйте этот {запрос: 'индия', начало: 0, строки: 10, результат отображения: 'видео', режим: 'текст'} - person Fateh Mohamed; 26.05.2018
comment
После заключения значений для каждого запроса в одинарные кавычки и использования двойных кавычек для всей строки я сделал такой запрос fq:'fq:'url_file_ext_s%3A(avi%2BOR%2Bmov%2BOR%2Bflw%2BOR%2Bmp4)'. Теперь в URL-адресе соответствующая строка становится такой fq=url_file_ext_s%253A(avi%252BOR%252Bmov%252BOR%252Bflw%252BOR%252Bmp4), что неожиданно - person Aakash Singh; 26.05.2018
comment
Я не знаю, как 25 добавляется перед каждым числом в URL-адресе. - person Aakash Singh; 26.05.2018
comment
пожалуйста, проверьте мой ответ здесь, используйте сериализатор URL, чтобы заменить свой символ stackoverflow.com/a/49618237/4399281 - person Fateh Mohamed; 26.05.2018
comment
для вашего случая это function cleanUrl(url) { return url.replace('%25','%') // например, чтобы удалить скобки } - person Fateh Mohamed; 26.05.2018

arrow_upward
1
arrow_downward

Вам нужно заключить свойство 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>
person Aamir Khan    schedule 25.05.2018
comment
Ваш ответ был действительно полезен, но после переноса URL становится таким http://localhost:4200/search?query=undefined&start=0&rows=10&resultDisplay=undefined&mode=undefined - person Aakash Singh; 26.05.2018
comment
Термины заменены на undefined - person Aakash Singh; 26.05.2018
comment
@AakashSingh попробуйте заключить значения для каждого запроса в одинарные кавычки и используйте двойные кавычки для всей строки. Проверьте мой обновленный ответ. - person Aamir Khan; 26.05.2018
comment
После заключения значений для каждого запроса в одинарные кавычки и использования двойных кавычек для всей строки я сделал такой запрос fq:'fq:'url_file_ext_s%3A(avi%2BOR%2Bmov%2BOR%2Bflw%2BOR%2Bmp4)'. Теперь в URL-адресе соответствующая строка становится такой fq=url_file_ext_s%253A(avi%252BOR%252Bmov%252BOR%252Bflw%252BOR%252Bmp4), что неожиданно - person Aakash Singh; 26.05.2018
comment
Я не знаю, как 25 добавляется перед каждым числом в URL-адресе. - person Aakash Singh; 26.05.2018