NavigationExtras

Enables relative navigation from the current ActivatedRoute.

Configuration:

[{
  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 });
   }
 }

Sets query parameters to the URL.

// Navigate to /results?page=1
this.router.navigate(['/results'], { queryParams: { page: 1 } });

Sets the hash fragment for the URL.

// Navigate to /results#top
this.router.navigate(['/results'], { fragment: 'top' });

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 });

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" });

Preserves the fragment for the next navigation

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

Navigates without pushing a new state into history.

// Navigate silently to /view
this.router.navigate(['/view'], { skipLocationChange: true });

Navigates while replacing the current state in history.

// Navigate to /view
this.router.navigate(['/view'], { replaceUrl: true });

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.