NavigationExtras
interface
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 |
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 @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 } }); |
fragment?: string |
Sets the hash fragment for the URL. // Navigate to /results#top this.router.navigate(['/results'], { fragment: 'top' }); |
preserveQueryParams?: boolean |
DEPRECATED: Use |
queryParamsHandling?: QueryParamsHandling | null |
How to handle query parameters in the router link for the next navigation. One of:
// from /results?page=1 to /view?page=1&page=2 this.router.navigate(['/view'], { queryParams: { page: 2 }, queryParamsHandling: "merge" }); |
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 }); |
skipLocationChange?: boolean |
When true, navigates without pushing a new state into history. // Navigate silently to /view this.router.navigate(['/view'], { skipLocationChange: true }); |
replaceUrl?: boolean |
When true, navigates while replacing the current state in history. // Navigate to /view this.router.navigate(['/view'], { replaceUrl: true }); |
state?: { [k: string]: any; } |
Developer-defined state that can be passed to any navigation. Access this value through the After a navigation completes, the router writes an object containing this value together with a Note that |
© 2010–2020 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v9.angular.io/api/router/NavigationExtras