Passing Query Parameters and Fragments in Angular 4

–HTML File (servers.component.html)

<a 
  [routerLink]="['/servers', 5, 'edit']"
  [queryParams]="{allowEdit: '1'}"
  fragement="loading"
  href="#"
  class="list-group-item"
  *ngFor="let server of servers">
  {{ server.name }}
</a>

–TS File (Routing)

{path: 'users/:id/:name', component: UserComponent},
{path: 'servers/:id/edit', component: EditServerComponent}

Also with Event ()

–HTML File (home.component.html)

<button class="btn btn-primary" (click)="onLoadServer(1)">Load Server 1</button>

–TS File (home.component.ts)

onLoadServer(id: number) {
  this.router.navigate(['/servers', id, 'edit'], {queryParams: {allowEdit: '1'}, fragment: 'loading'})
}