NavigationExtras

Stable Interface

What it does

Represents the extra options used during navigation.

Interface Overview

interface NavigationExtras {
  relativeTo : ActivatedRoute
  queryParams : Params
  fragment : string
  preserveQueryParams : boolean
  preserveFragment : boolean
  skipLocationChange : boolean
  replaceUrl : boolean
}

Interface Description

Interface Details

relativeTo : ActivatedRoute

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 });
  }
}
queryParams : Params

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

Preserves the query parameters for the next navigation.

// Preserve query params from /results?page=1 to /view?page=1
this.router.navigate(['/view'], { preserveQueryParams: true });
preserveFragment : boolean

Preserves the fragment for the next navigation

// 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 });
replaceUrl : boolean

Navigates while replacing the current state in history.

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

exported from @angular/router/index, defined in @angular/router/src/router.ts

doc_Angular
2016-10-06 09:46:43
Comments
Leave a Comment

Please login to continue.