{ "id": "api/router/UrlCreationOptions", "title": "UrlCreationOptions", "contents": "\n\n
\n
\n
\n \n API > @angular/router\n
\n
\n mode_edit\n code\n
\n
\n \n
\n

UrlCreationOptionslink

\n \n \n \n \n \n
\n \n \n\n
\n \n
\n

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

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

Child interfaceslink

\n \n\n\n\n\n
\n \n\n\n \n \n\n
\n\n \n
\n

See alsolink

\n \n
\n\n\n \n \n \n
\n

Propertieslink

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
PropertyDescription
\n \n relativeTo?: ActivatedRoute | null\n \n \n

Specifies a root URI to use for relative navigation.

\n\n

For example, consider the following route configuration where the parent route\nhas two children.

\n\n[{\n path: 'parent',\n component: ParentComponent,\n children: [{\n path: 'list',\n component: ListComponent\n },{\n path: 'child',\n component: ChildComponent\n }]\n}]\n\n

The following go() function navigates to the list route by\ninterpreting the destination URI as relative to the activated child route

\n\n @Component({...})\n class ChildComponent {\n constructor(private router: Router, private route: ActivatedRoute) {}\n\n go() {\n this.router.navigate(['../list'], { relativeTo: this.route });\n }\n }\n\n

A value of null or undefined indicates that the navigation commands should be applied\nrelative to the root.

\n\n
\n \n queryParams?: Params | null\n \n \n

Sets query parameters to the URL.

\n\n \n// Navigate to /results?page=1\nthis.router.navigate(['/results'], { queryParams: { page: 1 } });\n\n\n
\n \n fragment?: string\n \n \n

Sets the hash fragment for the URL.

\n\n \n// Navigate to /results#top\nthis.router.navigate(['/results'], { fragment: 'top' });\n\n\n
\n \n queryParamsHandling?: QueryParamsHandling | null\n \n \n

How to handle query parameters in the router link for the next navigation.\nOne of:

\n
    \n
  • preserve : Preserve current parameters.
    • \n
  • merge : Merge new with current parameters.
    • \n
\n\n

The \"preserve\" option discards any new query params:

\n\n// from /view1?page=1 to/view2?page=1\nthis.router.navigate(['/view2'], { queryParams: { page: 2 }, queryParamsHandling: \"preserve\"\n});\n\n

The \"merge\" option appends new query params to the params from the current URL:

\n\n// from /view1?page=1 to/view2?page=1&otherKey=2\nthis.router.navigate(['/view2'], { queryParams: { otherKey: 2 }, queryParamsHandling: \"merge\"\n});\n\n

In case of a key collision between current parameters and those in the queryParams object,\nthe new value is used.

\n\n
\n \n preserveFragment?: boolean\n \n \n

When true, preserves the URL fragment for the next navigation

\n\n \n// Preserve fragment from /results#top to /view#top\nthis.router.navigate(['/view'], { preserveFragment: true });\n\n\n
\n
\n \n\n\n \n\n\n
\n
\n\n\n" }