UrlCreationOptions

UrlCreationOptions

interface

Options that modify the Router URL. Supply an object containing any of these properties to a Router navigation function to control how the target URL should be constructed.

interface UrlCreationOptions {
  relativeTo?: ActivatedRoute | null
  queryParams?: Params | null
  fragment?: string
  queryParamsHandling?: QueryParamsHandling | null
  preserveFragment?: boolean
}

Child interfaces

• NavigationExtras

See also

• Router.navigate() method
• Router.createUrlTree() method
• Routing and Navigation guide

Properties

Property	Description
null	Specifies a root URI to use for relative navigation. For example, consider the following route configuration where the parent route has two children. [{ path: 'parent', component: ParentComponent, children: [{ path: 'list', component: ListComponent },{ path: 'child', component: ChildComponent }] }] The following go() function navigates to the list route by interpreting the destination URI as relative to the activated child route @Component({...}) class ChildComponent { constructor(private router: Router, private route: ActivatedRoute) {} go() { this.router.navigate(['../list'], { relativeTo: this.route }); } } A value of null or undefined indicates that the navigation commands should be applied relative to the root.
null	Sets query parameters to the URL. // Navigate to /results?page=1 this.router.navigate(['/results'], { queryParams: { page: 1 } });
fragment?: string	Sets the hash fragment for the URL. // Navigate to /results#top this.router.navigate(['/results'], { fragment: 'top' });
null	How to handle query parameters in the router link for the next navigation. One of: preserve : Preserve current parameters. merge : Merge new with current parameters. The "preserve" option discards any new query params: // from /view1?page=1 to/view2?page=1 this.router.navigate(['/view2'], { queryParams: { page: 2 }, queryParamsHandling: "preserve" }); The "merge" option appends new query params to the params from the current URL: // from /view1?page=1 to/view2?page=1&otherKey=2 this.router.navigate(['/view2'], { queryParams: { otherKey: 2 }, queryParamsHandling: "merge" }); In case of a key collision between current parameters and those in the queryParams object, the new value is used.
preserveFragment?: boolean	When true, preserves the URL fragment for the next navigation // Preserve fragment from /results#top to /view#top this.router.navigate(['/view'], { preserveFragment: true });

© 2010–2021 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://angular.io/api/router/UrlCreationOptions