查询参数在 Angular 中路由后在 URL 中修改

Question

我按照这个答案使用 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>

但是单击 link 会将我重定向到此 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

我做错了什么？

Answer 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>

Answer 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>

查询参数在 Angular 中路由后在 URL 中修改

Query Parameters get modified in URL after route in Angular

angular

typescript

routing

angular4-router