Angular 12 References/ Router
🍀 Angular References
Oleksa Novyk | GitHub

NavigationExtras

Represents the extra options used during navigation.

Properties

fragment#

fragment?: string

Sets the hash fragment for the URL.

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

preserveFragment#

preserveFragment?: boolean

Preserves the fragment for the next navigation.

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

preserveQueryParams#

preserveQueryParams?: boolean

Preserves the query parameters for the next navigation.

Deprecated, use queryParamsHandling instead.

queryParams#

queryParams?: Params|null

Sets query parameters to the URL.

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

queryParamsHandling#

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

relativeTo#

relativeTo?: ActivatedRoute|null

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

replaceUrl#

replaceUrl?: boolean

Navigates while replacing the current state in history.

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

skipLocationChange#

skipLocationChange?: boolean

Navigates without pushing a new state into history.

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

state#

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.