How to pass query parameters with a routerLink

by

queryParams

queryParams is another input of routerLink where they can be passed like

<a [routerLink]="['../']" [queryParams]="{prop: 'xxx'}">Somewhere</a>

fragment

<a [routerLink]="['../']" [queryParams]="{prop: 'xxx'}" [fragment]="yyy">Somewhere</a>

routerLinkActiveOptions

To also get routes active class set on parent routes:

[routerLinkActiveOptions]="{ exact: false }"

To pass query parameters to this.router.navigate(...) use

let navigationExtras: NavigationExtras = {
  queryParams: { 'session_id': sessionId },
  fragment: 'anchor'
};

// Navigate to the login page with extras
this.router.navigate(['/login'], navigationExtras);

See also https://angular.io/guide/router#query-parameters-and-fragments

More Related Contents:

  1. Angular 2.0 router not working on reloading the browser
  2. How to detect a route change in Angular?
  3. Angular 2: 404 error occur when I refresh through the browser [duplicate]
  4. How do I create a singleton service in Angular 2?
  5. How to go back last page
  6. Angular2 multiple router-outlet in the same template
  7. Warn user of unsaved changes before leaving page
  8. ‘router-outlet’ is not a known element
  9. Passing data into “router-outlet” child components
  10. Angular 2 unit testing components with routerLink
  11. How can I conditionally disable the routerLink attribute?
  12. Dynamic routing based on external data
  13. How to switch layouts in Angular2
  14. How do I detect user navigating back in Angular2?
  15. Using Resolve In Angular2 Routes
  16. Angular2 – Interaction between components using a service
  17. Is Angular 2’s Router broken when using HTML5 routes? [duplicate]
  18. Angular2 router.navigate refresh page
  19. Multiple canActivate guards all run when first fails
  20. Angular 2 router resolve with Observable
  21. Can’t reload/refresh active route
  22. Lazy Loading BrowserModule has already been loaded
  23. How do I navigate to a sibling route?
  24. Redirect to a different component inside @CanActivate in Angular2
  25. Pass parameter into route guard
  26. Angular 2 – Routing – CanActivate work with Observable
  27. Want to prevent Component recreation while routing in Angular 2
  28. New Angular2 router configuration
  29. Angular2 Routing – keeping state of component when route changes [duplicate]
  30. Custom encoding for urls using Angular 2 Router (using a + sign in place of a space)

Leave a Comment