API 参考手册
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
  state?: {...}
}

属性

属性说明
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
  }]
}]

从 child 路由导航到 list 路由：

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

设置 URL 的查询参数。

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

设置 URL 的哈希片段（#）。

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.

已废弃，请用 queryParamsHandling 代替

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