填写这份《一分钟调查》,帮我们(开发组)做得更好!去填写Home

NavigationExtras

用于修订导航策略的额外选项。

Options that modify the navigation strategy.

      
      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

允许从当前激活的路由进行相对导航。

Specifies a root URI to use for relative navigation.

比如,考虑下列路由器配置,parent 路由拥有两个子路由。

For example, consider the following route configuration where the parent route has two children.

[{ 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
  }]
}]
    

The following go() function navigates to the list route by interpreting the destination URI as relative to the activated 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

已废弃,请改用 queryParamsHandling 来为后续导航保留查询参数。

DEPRECATED: Use queryParamsHandling: "preserve" instead to preserve query parameters for the next navigation.

queryParamsHandling?: QueryParamsHandling | null

How to handle query parameters in the router link for the next navigation. One of:

  • merge : Merge new with current parameters.

  • 配置后续导航时对查询(?)参数的处理策略。

    preserve : Preserve current parameters.

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

在后续导航时保留#片段

When true, preserves the URL 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

导航时不要把新状态记入历史

When true, 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

导航时不要把当前状态记入历史

When true, 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; }

Developer-defined state that can be passed to any navigation. Access this value through the Navigation.extras object returned from router.getCurrentNavigation() while a navigation is executing.

After a navigation completes, the router writes an object containing this value together with a navigationId to history.state. The value is written when location.go() or location.replaceState() is called before activating this route.

Note that history.state does not pass an object equality test because the router adds the navigationId on each navigation.