Angular 5 URL 路由，单击按钮并在 url 中保留查询字符串参数答案

【问题标题】：Angular 5 URL routing with a button click and retain the querystring params in the urlAngular 5 URL 路由，单击按钮并在 url 中保留查询字符串参数
【发布时间】：2018-06-12 14:21:03
【问题描述】：

我有一个这样的网址

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>

打字稿功能

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?

【问题讨论】：

标签： javascript angular typescript routes angular-routing

【解决方案1】：

addHearing(){
    this.router.navigate(['/cr/edithearings'], { queryParams: { key: value } })
}

navigate 有一个 queryParams 参数

【讨论】：

所以它会添加所有现有的url参数？
你必须设置它。从 url 中获取参数并将其添加到 addHearing 函数中。
如何设置？ key: value 值是它下面的红线

【解决方案2】：

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

注意preserveQueryParams 没有方括号。

例如：

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

代码示例：

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

【讨论】：

所以改为在 html 中执行此操作？我有一个带有 (click) ... 函数调用的
SCORE，TY 非常好。
@ScottLeary：欢迎 :)