在 Angular 中路由后，查询参数在 URL 中被修改答案

【问题标题】：Query Parameters get modified in URL after route in Angular在 Angular 中路由后，查询参数在 URL 中被修改
【发布时间】：2018-11-05 07:50:35
【问题描述】：

我正在关注这个答案 https://stackoverflow.com/a/44865817/7407321 以使用 queryParams 导航到一个 url。我正在遵循我们可以将值传递给 url 的 3 种方式。

<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

我做错了什么？

【问题讨论】：

标签： angular typescript routing angular4-router

【解决方案1】：

使用属性绑定传递参数，[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>

【讨论】：

您的回答确实很有帮助，但在包装 url 后变成这样http://localhost:4200/search?query=undefined&start=0&rows=10&resultDisplay=undefined&mode=undefined
条款替换为undefined
试试这个“{query:'india',start:0,rows:10,resultDisplay:'video',mode:'text'}”
在将每个查询的值用单引号括起来，并对整个字符串使用双引号后，我进行了这样的查询 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)出乎意料
我不知道25是如何在url中的每个数字前附加的。

【解决方案2】：

您需要将您的 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>

【讨论】：

您的回答确实很有帮助，但在包装 url 后变成这样 http://localhost:4200/search?query=undefined&start=0&rows=10&resultDisplay=undefined&mode=undefined
条款替换为undefined
@AakashSingh 尝试将每个查询的值用单引号括起来，并对整个字符串使用双引号。查看我的更新答案。
在将每个查询的值用单引号括起来，并对整个字符串使用双引号后，我进行了这样的查询 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)出乎意料
我不知道25是如何在url中的每个数字前附加的。