javascript - Angular 5 URL routing with a button click and retain the querystring params in the url - Stack Overflow

admin管理员组

文章数量:1430958

I have a URL which is like this

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

The router module knows to display based on this

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

but now I have a button click in which I want to maintain the querystring.

button html

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

typescript function

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

I want to add the existing querystring to above button click event then in the route module it goes to proper route, along with the querystring

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

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

I have a URL which is like this

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

The router module knows to display based on this

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

but now I have a button click in which I want to maintain the querystring.

button html

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

typescript function

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

I want to add the existing querystring to above button click event then in the route module it goes to proper route, along with the querystring

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

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

• javascript
• angular
• typescript
• routes
• angular-routing

Share Improve this question Follow asked Jan 2, 2018 at 21:58 user9036522user9036522

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

If you are navigating using HTML template, you can use preserveQueryParams="true"

Notice that preserveQueryParams is without a square bracket.

Eg:

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

In-code example :

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

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

navigate has a queryParams parameter

本文标签：