NavigationExtras

interface

Contents

Properties

Options that modify the navigation strategy.

      
      interface NavigationExtras {
  relativeTo?: ActivatedRoute | null
  queryParams?: Params | null
  fragment?: string
  preserveQueryParams?: boolean
  queryParamsHandling?: QueryParamsHandling | null
  preserveFragment?: boolean
  skipLocationChange?: boolean
  replaceUrl?: boolean
  state?: {...}
}

Properties

Property	Description
`relativeTo?: ActivatedRoute \| null`	Enables relative navigation from the current ActivatedRoute. Configuration: [{ path: 'parent', component: ParentComponent, children: [{ path: 'list', component: ListComponent },{ path: 'child', component: ChildComponent }] }] `[{ path: 'parent', component: ParentComponent, children: [{ path: 'list', component: ListComponent },{ path: 'child', component: ChildComponent }] }]` Navigate to list route from child route: @Component({...}) class ChildComponent { constructor(private router: Router, private route: ActivatedRoute) {} go() { this.router.navigate(['../list'], { relativeTo: this.route }); } } `@Component({...}) class ChildComponent { constructor(private router: Router, private route: ActivatedRoute) {} go() { this.router.navigate(['../list'], { relativeTo: this.route }); } }`
`queryParams?: Params \| null`	Sets query parameters to the URL. // Navigate to /results?page=1 this.router.navigate(['/results'], { queryParams: { page: 1 } }); `// 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' }); `// Navigate to /results#top this.router.navigate(['/results'], { fragment: 'top' });`
`preserveQueryParams?: boolean`	DEPRECATED: Use `queryParamsHandling` instead to preserve query parameters for the next navigation. // Preserve query params from /results?page=1 to /view?page=1 this.router.navigate(['/view'], { preserveQueryParams: true }); `// Preserve query params from /results?page=1 to /view?page=1 this.router.navigate(['/view'], { preserveQueryParams: true });`
`queryParamsHandling?: QueryParamsHandling \| null`	Configuration strategy for how to handle query parameters for the next navigation. // from /results?page=1 to /view?page=1&page=2 this.router.navigate(['/view'], { queryParams: { page: 2 }, queryParamsHandling: "merge" }); `// from /results?page=1 to /view?page=1&page=2 this.router.navigate(['/view'], { queryParams: { page: 2 }, queryParamsHandling: "merge" });`
`preserveFragment?: boolean`	Preserves the fragment for the next navigation // Preserve fragment from /results#top to /view#top this.router.navigate(['/view'], { preserveFragment: true }); `// Preserve fragment from /results#top to /view#top this.router.navigate(['/view'], { preserveFragment: true });`
`skipLocationChange?: boolean`	Navigates without pushing a new state into history. // Navigate silently to /view this.router.navigate(['/view'], { skipLocationChange: true }); `// Navigate silently to /view this.router.navigate(['/view'], { skipLocationChange: true });`
`replaceUrl?: boolean`	Navigates while replacing the current state in history. // Navigate to /view this.router.navigate(['/view'], { replaceUrl: true }); `// Navigate to /view this.router.navigate(['/view'], { replaceUrl: true });`
`state?: { [k: string]: any; }`	State passed to any navigation. This value will be accessible through the `extras` object returned from `router.getCurrentNavigation()` while a navigation is executing. Once a navigation completes, this value will be written to `history.state` when the `location.go` or `location.replaceState` method is called before activating of this route. Note that `history.state` will not pass an object equality test because the `navigationId` will be added to the state before being written. While `history.state` can accept any type of value, because the router adds the `navigationId` on each navigation, the `state` must always be an object.