This is the archived documentation for Angular v6. Please visit angular.io to see documentation for the current version of Angular.
API > @angular/router

NavigationExtras

Represents the extra options used during navigation.

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

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

Preserves the query parameters for the next navigation.

deprecated, use queryParamsHandling instead

// 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

config strategy to handle the 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 });