## NavigationExtras 表示在导航过程中使用的额外选项。 ### 接口定义 ```typescript interface NavigationExtras { relativeTo : ActivatedRoute queryParams : Params fragment : string preserveQueryParams : boolean preserveFragment : boolean skipLocationChange : boolean replaceUrl : boolean } ``` ### 属性 - relativeTo : `ActivatedRoute` 在当前路由开启相对路径导航 配置： ```typescript [{ path: 'parent', component: ParentComponent, children: [ { path: 'list', component: ListComponent }, { path: 'child', component: ChildComponent } ] }] ``` 从child路由导航到list路由 ```typescript @Component({...}) class ChildComponent { constructor(private router: Router, private route: ActivatedRoute) {} go() { this.router.navigate(['../list'], { relativeTo: this.route }); } } ``` - queryParams : `Params`设置URL的查询参数 ```typescript // Navigate to /results?page=1 this.router.navigate(['/results'], { queryParams: { page: 1 } }); ``` fragment : `string` 设置URL的has片段 ```typescript // Navigate to /results#top this.router.navigate(['/results'], { fragment: 'top' }); ``` - preserveQueryParams : `boolean` 将查询参数带到下一个导航 ```typescript // Preserve query params from /results?page=1 to /view?page=1 this.router.navigate(['/view'], { preserveQueryParams: true }); ``` - preserveFragment : `boolean` 将片段带到下一个导航 ```typescript // Preserve fragment from /results#top to /view#top this.router.navigate(['/view'], { preserveFragment: true }); ``` - skipLocationChange : `boolean` 导航时不向history中添加记录 ```typescript // Navigate silently to /view this.router.navigate(['/view'], { skipLocationChange: true }); ``` replaceUrl : `boolean` 替换当前状态在history中的记录值 ```typescript // Navigate to /view this.router.navigate(['/view'], { replaceUrl: true }); ```