javascript - Angular 5 URL 路由，单击按钮并保留 url 中的查询字符串参数

Question

我有一个像这样的网址

http://localhost:4200/cr/hearings?UserID=61644&AppID=15&AppGroupID=118&SelectedCaseID=13585783&SelectedRoleID=0

路由器模块根据此知道显示

{ path: 'criminal/hearings', component: HearingsComponent, pathMatch: 'full'},

但现在我单击了一个按钮，我想在其中维护查询字符串。

按钮 html

<button type="button" (click)="addHearing()" class="btn btn-primary">Add Hearing</button>

typescript 函数

addHearing(){
    this.router.navigate(['/cr/edithearings']) // how to include the querystring???
}

我想将现有的查询字符串添加到上面的按钮单击事件中然后在路由模块中它会与查询字符串一起转到正确的路由

{ path: 'criminal/edithearings', component: HearingEditComponent, pathMatch: 'full'},

http://localhost:4200/criminal/edithearings?HOW_to_add ？

Answer 1

如果您使用 HTML 模板进行导航，则可以使用 preserveQueryParams="true"

请注意，preserveQueryParams 没有方括号。

例如:

<a [routerLink]="['/navigate-to']" preserveQueryParams="true">

代码内示例:

addHearing(){
    this.router.navigate(['somewhere'], { queryParamsHandling: "preserve" });
}